排序后将 class 标记应用于单个 JavaScript 数组条目

Question

我正在尝试将相同的 css class 应用到创建的数组中的每个单独条目，但我只对整个数组应用了一次。

我的代码如下..

    function sortballhistory() {
        var str = document.getElementById("ballhistory").innerText;
    var temp = new Array();
    // This will return an array with strings "1", "2", etc.
    temp = str.split(",");
    temp.sort(function (a, b) {  return a - b;  });
    temp = 'temp.slice(1);
    document.getElementById('ballhistorysortedarr').innerHTML = temp;

};

ballhistory innerText 包含随机排列的数字 1-90，例如（2、5、7、76 等）这些会在每次页面加载时发生变化。

我试过了 1)

temp = '<span class="smallball">' + temp.slice(1) + '</span>';
document.getElementById('ballhistorysortedarr').innerHTML = temp;

也试过 2)

  document.getElementById('ballhistorysortedarr').innerHTML = '<span class="smallball">' + temp; + '</span>';

还有 3)

 document.getElementById('ballhistorysortedarr').innerHTML += '<span class="smallball">' + temp; + '</span>';

但是没有一个能给出单独设置每个条目样式的预期结果。

Answer 1

您需要遍历临时数组中的每个元素和 return 包含在跨度内的元素。这就是您可以向跨度提供 class 的方式，请检查下面的代码，如果这就是您想要实现的目标，请告诉我。

var btn = document.getElementById("btn");

btn.addEventListener('click', function() {
  sortballhistory();
})

function sortballhistory() {
        var str = document.getElementById("ballhistory").innerText;
    var temp = new Array();
    // This will return an array with strings "1", "2", etc.
    temp = str.split(",");
    temp.sort(function (a, b) {  return a - b;  });
    var result = '';
    for(var i=0; i<temp.length; i++) {
      result+="<span class='item'>" + temp[i] + "</span>"
    }
    document.getElementById('ballhistorysortedarr').innerHTML = result;

};

.item {
  color: red;
}

<div id="ballhistory">2, 3, 5,4, 6, 2, 5, 1, 8, 4</div>
<button id='btn'>Click</button>

<div id='ballhistorysortedarr'></div>

排序后将 class 标记应用于单个 JavaScript 数组条目

Applying class tags to individual JavaScript Array entries after sorting

javascript

css

arrays

sorting

styles