Javascript大于（>；）运算符工作不正常

我试图制作一个可视化工具，描述一些排序算法的工作原理，除了只有20个值外，与视频类似。我们的想法是让条形图有x%的长度，其中x是一个随机数，我使用网格根据它们所代表的数字来排列条形图。 首先，我尝试使用以下代码进行暴力排序：

sleep(ms){
  return new Promise((resolve) => setTimeout(resolve, ms));
}
async function bruteForce() {
  let vals = [...grid.querySelectorAll(".grid-item")];

  for (let i = 0; i < vals.length; ++i) {
    for (let j = 0; j < vals.length; ++j) {
      if (i != j) {
        vals[i].classList.add("compare");
        vals[j].classList.add("compare");
        const node1val = parseInt(vals[i].getAttribute("data-value"));
        const node2val = parseInt(vals[j].getAttribute("data-value"));

        if (node2val > node1val) {
          console.log(node2val + " > " + node1val);
          const node1Class = vals[i].className;
          vals[i].className = vals[j].className;
          vals[j].className = node1Class;
        } else {
          console.log(node2val + " < " + node1val);
        }

        await sleep(300);
        vals[i].classList.remove("compare");
        vals[j].classList.remove("compare");
      }
    }
  }
}

睡眠（毫秒）{
返回新承诺（（resolve）=>setTimeout（resolve，ms））；
}
异步函数bruteForce（）{
让VAL=[…grid.queryselectoral（“.grid项”）]；
对于（设i=0；inode1val）{
console.log（node2val+“>”+node1val）；
const node1Class=vals[i].className；
VAL[i].className=VAL[j].className；
VAL[j].className=NodeClass；
}否则{
console.log（node2val+“<”+node1val）；
}
等待睡眠（300）；
vals[i].classList.remove（“比较”）；
vals[j].classList.remove（“比较”）；
}
}
}
}

问题是这些值没有正确排序。 值5、87、56、45、20按20、45、56、87、5排序

以下是控制台输出：

87 > 5 
56 > 5 
*45 < 5* 
*20 < 5*
5 < 87 
56 < 87
45 < 87 
20 < 87 
5 < 56 
87 > 56 
45 < 56 
20 < 56 
*5 > 45* 
87 > 45 
56 > 45 
20 < 45 
*5 > 20* 
87 > 20 
56 > 20 
45 > 20 

87>5
56 > 5 
*45 < 5* 
*20 < 5*
5 < 87 
56 < 87
45 < 87 
20 < 87 
5 < 56 
87 > 56 
45 < 56 
20 < 56 
*5 > 45* 
87 > 45 
56 > 45 
20 < 45 
*5 > 20* 
87 > 20 
56 > 20 
45 > 20 

​我强调了错误的。为什么口译员认为5大于20？我如何纠正这个问题

更新：修复了字符串比较。仍然得到错误的值顺序。不过，控制台输出现在是正确的。

---

我猜你是在比较字符串

45<5

为假，而

“45”<5

为真

---

尝试使用

parseInt（）

函数将字符串转换为int。

属性值是

string

，您应该将它们转换为

number

const node1val = parseInt(vals[i].getAttribute("data-value"));
const node2val =  parseInt(vals[j].getAttribute("data-value"));

---

你在比较字符串，排序是正确的。尽管您为什么不使用

sort（）

？@MikeBrockington将sort（）用于DOM元素？内置的sort将用于任何东西-您只需要在处理对象时提供一个小的/简单的比较函数。@MikeBrockington尝试使用sort。元素会被排序。但是，显示的元素不会更改，因为它们的顺序由网格通过类名g-i-1、g-i-2、g-i-3等指定。