排序后如何为JavaScript数组的每个元素单独添加class标签

问题原因 #

之前的尝试均是直接对整个数组做字符串拼接，数组转为字符串后是逗号连接的完整字符串，因此只会全局包裹一次样式标签。此外原有代码存在语法错误：temp = 'temp.slice(1); 多出多余单引号、尝试2/3中temp; + 多出多余分号，也会导致功能异常。

正确实现代码 #

function sortballhistory() {
  // 获取原始数字串
  var str = document.getElementById("ballhistory").innerText;
  // 拆分字符串为数组，同时去除每个数字前后的空格
  var temp = str.split(",").map(item => item.trim());
  // 按数字大小升序排序
  temp.sort(function (a, b) {
    return a - b;
  });
  // 遍历每个数字单独包裹样式标签，最后用逗号+空格拼接
  var renderHtml = temp.slice(1).map(num => {
    return `<span class="smallball">${num}</span>`
  }).join(', ');
  // 渲染到目标节点
  document.getElementById('ballhistorysortedarr').innerHTML = renderHtml;
}

逻辑说明 #

• 拆分字符串时增加trim()处理，避免原始内容中数字前后的空格干扰排序或样式展示
• 通过map()遍历数组的每一项，为单个数字单独包裹span标签，实现每个元素独立加类的需求
• 最终用join(', ')拼接所有标签字符串，和原始数字串的逗号分隔格式保持一致

内容的提问来源于stack exchange，提问作者Glen Keybit