JavaScript冒泡排序卡在无限循环中

我正在尝试使用HTML、CSS和JS（jQuery）制作一个冒泡排序算法。其想法是交换项目的高度，以按高度（OBV）对其进行排序。
不知何故，我的代码让我陷入了一个无限循环。我希望有人能帮我找出问题所在。提前谢谢

var el = $('#item_parent');
var items = [];

//Genrate elements
for(let i = 0; i < 5; i++){
    let rand = Math.floor(Math.random() * 300) + 1;
    el.append("<div class='item d-flex justify-content-between' data-height='"+rand+"' style='height: "+rand+"px; flex: 1; margin: 0 5px;'></div>");
}
//Populating the array with the elements
items = $(".item");

var sorted = false;

while(!sorted){
    sorted = true;
    for (let i = 0; i < items.length - 1; i++){
        if ($(items[i]).data('height') > $(items[i+1]).data('height')){
            console.log($(items[i]).data('height') + " is greater than " + $(items[i+1]).data('height') + ". Swapping");
            swapHeight(items, i, i+1);
            sorted = false;
        }
    }
}

function swapHeight(elArray, firstIndex, secondIndex){
    let temp = $(elArray[firstIndex]).data('height');
    $(elArray[firstIndex]).css('height', $(elArray[secondIndex]).data('height') + "px");
    $(elArray[secondIndex]).css('height', temp + "px");
}

var el=$（'item#u parent'）；
var项目=[]；
//生成元素
for（设i=0；i<5；i++）{
设rand=Math.floor（Math.random（）*300）+1；
el.附加（“”）；
}
//用元素填充数组
项目=$（“.item”）；
var=false；
而（！排序）{
排序=真；
for（设i=0；i$（项目[i+1]）.data（'height'））{
console.log（$（项目[i]）。数据（'height'）+”大于“+$（项目[i+1]）。数据（'height'）+”。交换”）；
swapHeight（项目，i，i+1）；
排序=假；
}
}
}
函数交换光（elArray、firstIndex、secondIndex）{
设temp=$（elArray[firstIndex]）。数据（'height'）；
$（elArray[firstIndex]）.css（'height'，$（elArray[secondIndex]）.data（'height'）+“px”）；
$（elArray[secondIndex]）.css（'height'，temp+'px'）；
}

您正在读取

.data（'height'）

但正在写入

.css（'height'）

关于

.data（'height'）

和

.css（'height'）

之间的关系，这只是一个小问题（别担心，我们早上的咖啡因水平都不够）。它们是完全不同的东西

因此，您的

swapHeight

不会交换您正在比较的

.data

，事情会在无限循环中进行

---

JQuery在内部存储其

.data

，而不是作为元素CSS样式中的高度。请参见

您拥有所有这些很棒的console.log消息。他们说了什么？不要使用

data（'height'）

，尝试使用

dataset.height

，还要确保您交换了dataset.height和css样式的height。看起来您只是在交换样式高度，这意味着if（）测试不会看到任何更改。script.js:19 236大于124。交换script.js:19 248大于41。交换script.js:19 236大于124。交换可能是您正在读取数据（'height'），但正在写入.css（'height'），它们不是不同的东西吗？JQuery在内部存储数据，而不是作为css元素样式的高度。看：是的，我不得不改变高度和css属性。我觉得这是环路的问题。。。谢谢大家。我对SwapHeight函数进行了更改，例如它交换css高度和数据属性'height'。这个问题已经解决。但是，是的，我只是在更改css，而不是数据属性。这就是问题所在。我不得不改变他们两个（duh）。但感谢您的回复：）