如何对div进行数字排序?

时间:2019-12-02 07:22:56

标签: javascript jquery html

我在另一个div中有一个div块。内部div的ID(例如:_1_f)是动态生成的。我希望对这些内部div进行数字排序。

<div class="b" id="af">
<div title="(Blank)" id="_0_f">(Blank)</div>
<div id="_1_f">-2</div><div id="_2_f">-3</div>
<div id="_3_f">1</div>
<div id="_4_f">0</div>
<div id="_5_f">104</div>
<div id="_6_f">1013</div>
<div id="_7_f">101</div>
<div id="_8_f">116</div>
<div id="_9_f">17</div>
<div id="_10_f">100</div>
</div>

1 个答案:

答案 0 :(得分:0)

我解决了您的问题,这不是最好的方法,但是可以解决。

function compareNumbers(a, b) {
   return a - b
}
const numbers = document.querySelectorAll(".tosort");
const display = document.querySelector(".newdisplay")
console.log(numbers);
let temp = [];
numbers.forEach(num => {
  temp.push(Number(num.textContent));
  //display.appendChild(num);
})
temp.sort(compareNumbers);
console.log(temp);
for(var i = 0;i < temp.length;i++){
  for(var j = 0;j < temp.length;j++){
    if(numbers[j].textContent == temp[i]){
        display.appendChild(numbers[j]);
    }
  }
}
<div class="b" id="af">
<div title="(Blank)" id="_0_f">(Blank)</div>
<div class ="tosort" id="tosort _1_f">-2</div>
<div class ="tosort" id="tosort _2_f">-3</div>
<div class ="tosort" id="tosort _3_f">1</div>
<div class ="tosort" id="tosort _4_f">0</div>
<div class ="tosort" id="tosort _5_f">104</div>
<div class ="tosort" id="tosort _6_f">1013</div>
<div class ="tosort" id="tosort _7_f">101</div>
<div class ="tosort" id="tosort _8_f">116</div>
<div class ="tosort" id="tosort _9_f">17</div>
<div class ="tosort" id="tosort _10_f">100</div>
<div class="newdisplay"></div>
</div>