如何通过内部文本对 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 nodesitems.sort(function(a, b) {&nbsp; return a.innerHTML == b.innerHTML&nbsp; &nbsp; &nbsp; ? 0&nbsp; &nbsp; &nbsp; : (a.innerHTML > b.innerHTML ? 1 : -1);});然后，根据需要将它们放回 DOM 中，例如：for (i = 0; i < items.length; ++i) {&nbsp; divList.appendChild(items[i]);}

Answer 2

这适用于第一个代码示例！尝试这个 sortDivs 函数：function sortDivs() {&nbsp; &nbsp; document.querySelector("body div:last-child").remove();&nbsp; &nbsp; alert('sorting now...')&nbsp; &nbsp; let toSort = document.getElementsByTagName("div")&nbsp; &nbsp; toSort = Array.prototype.slice.call(toSort, 0)&nbsp; &nbsp; toSort.sort((a, b) => {&nbsp; &nbsp; &nbsp; &nbsp; let aord = parseFloat(a.textContent);&nbsp; &nbsp; &nbsp; &nbsp; let bord = parseFloat(b.textContent);&nbsp; &nbsp; &nbsp; &nbsp; return bord - aord;&nbsp; &nbsp; })&nbsp; &nbsp; document.body.innerHTML = ""&nbsp; &nbsp; for(var i = 0, l = toSort.length; i < l; i++) {&nbsp; &nbsp; &nbsp; &nbsp; document.querySelector('body').appendChild(toSort[i]);&nbsp; &nbsp; }}并在css文件中将flex-wrap设置为wrap-reverse。希望我能帮忙:)PS：请实现一些else if而不是仅执行if

Answer 3

这是我的示例代码的一个小摆弄，演示了一个简单的解决方案，使用纯 JavaScript 和绝对 CSS 定位来实现您想要实现的目标。 正如一些人已经指出的那样，可能有一个库已经为此提供了更好且完整的解决方案 - 我没有研究是否是这样。代码：文件.jsvar 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>输出：