如何通过内部文本对 DOM 上的元素进行排序

Question

我有一个图表，它根据数值将其值渲染为 body 元素内的 div，并带有一个类。这工作正常。但接下来我需要根据 div 的数值或背景颜色对它们进行排序。但是，它需要从页面的左下角开始，并随着数字的增加向上向右散开。基本上就像折线图一样。如果可能的话，我想远离图书馆。我该如何处理这个问题？谢谢你们。let interval = setInterval(makeDivs, 5);function makeDivs(){   let cont = checkHeight();   if(cont){      let div = document.createElement('div');      let randNum = Math.random() * 100;      if(randNum < 20) { div.classList.add('blue') }      if(randNum >= 20 && randNum < 40) { div.classList.add('green') }      if(randNum >= 40 && randNum < 60) { div.classList.add('yellow') }      if(randNum >= 60 && randNum < 80) { div.classList.add('orange') }      if(randNum >= 80 && randNum < 101) { div.classList.add('red') }      div.textContent = randNum.toFixed(2);      document.querySelector('body').appendChild(div);   } else {      alert('done');      clearInterval(interval);      sortDivs(); // Begin sorting divs   }}function checkHeight(){   let w = window.innerHeight;   let b = document.querySelector('body').offsetHeight;   if(b < w) {      return true;   } else {      return false;   }}function sortDivs(){   document.querySelector("body div:last-child").remove();   alert('sorting now...')}* { box-sizing: border-box;}body { width: 100vw; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: end;}body div { width: calc(10% + 1px); text-align: center; border: 1px solid #ddd; margin: -1px 0 0 -1px; padding: 10px;}body div.blue { background: aqua; }body div.green { background: green; }body div.yellow { background: yellow; }body div.orange { background: orange; }body div.red { background: red; }

Answer 1

假设您已经有一种在网格中组织此类 DIV 的机制（如图所示），那么以下内容应该为您提供所需的内容：

var items = divList.filter((div) => div.nodeType == 1); // get rid of the whitespace text nodes

items.sort(function(a, b) {

  return a.innerHTML == b.innerHTML

      ? 0

      : (a.innerHTML > b.innerHTML ? 1 : -1);

});

然后，根据需要将它们放回 DOM 中，例如：

for (i = 0; i < items.length; ++i) {

  divList.appendChild(items[i]);

}

Answer 2

这适用于第一个代码示例！

尝试这个 sortDivs 函数：

function sortDivs() {

    document.querySelector("body div:last-child").remove();

    alert('sorting now...')

    let toSort = document.getElementsByTagName("div")

    toSort = Array.prototype.slice.call(toSort, 0)

    toSort.sort((a, b) => {

        let aord = parseFloat(a.textContent);

        let bord = parseFloat(b.textContent);

        return bord - aord;

    })

    document.body.innerHTML = ""

    for(var i = 0, l = toSort.length; i < l; i++) {

        document.querySelector('body').appendChild(toSort[i]);

    }

}

并在css文件中将flex-wrap设置为wrap-reverse。希望我能帮忙:)

PS：请实现一些else if而不是仅执行if

Answer 3

这是我的示例代码的一个小摆弄，演示了一个简单的解决方案，使用纯 JavaScript 和绝对 CSS 定位来实现您想要实现的目标。 

正如一些人已经指出的那样，可能有一个库已经为此提供了更好且完整的解决方案 - 我没有研究是否是这样。

代码：

文件.js

var container = document.getElementById("container")

var results = [1,2,3,4,5,6,7,8]

//you can pre-calculate the order of the distances

//here already orderdered array [distanec][X-axis][Y-axis]

var distances =[[0,0,0],

                [1,1,0],

                [1,0,1],

                [1.414, 1,1],

                [2,0,2],

                [2,2,0],

                [2.234, 2,1],

                [2.234, 1,2]]

for (i = 0; i < results.length; i++){

  var newDiv = document.createElement("div")

  newDiv.className = "result"

  newDiv.innerHTML = results[i]

  newDiv.style.left = distances[i][1]*20 + "px"

  newDiv.style.bottom = distances[i][2]*20 + "px"

  container.appendChild(newDiv)

}

function setColor(element){

 // set class based on value - you already have this part

}

样式.css

#container {

  border: 4px;

  border-color: red;

  border-style: solid;

  height: 200px;

  width: 200px;

  position: relative;

}

.result{

  border: 2px;

  width: 20px;

  height: 20px;

  position: absolute;

  border-color: blue;

  border-style: solid;

  text-align: center;

}

网站.html

<div id="container">

</div>

输出：