JavaScript bubble sort stuck in infinite loop

Question

I'm trying to make a bubble sort algorithm using HTML, CSS and JS (jQuery). The idea is to swap the height of the items to sort them by height (obvs).
Somehow my code gets me stuck in an infinite loop. I was hoping someone could help me identify the problem. Thanks in advance!

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");
}

You have all those great console.log messages. What did they say? — Wyck, Oct 02 '20 at 14:05
Instead of using `data('height')`, try using `dataset.height` and also make sure that you swap both the dataset.height and the css style height. It looks like you are only swapping the style height, which means that the if() test will not see any changes. — ATD, Oct 02 '20 at 14:10
script.js:19 236 is greater than 124. Swapping script.js:19 248 is greater than 41. Swapping script.js:19 236 is greater than 124. Swapping — , Oct 02 '20 at 14:12
Could it be that you're reading data('height') but writing .css('height') Aren't they different things? JQuery stores data internally, not as the height of the css element style. See: https://stackoverflow.com/q/5821520/1563833 — Wyck, Oct 02 '20 at 14:12
Yup, I had to change the height and css attributes. I got tunnel visioned thinking it was the loop's problem... Thank you all. I made changes to the SwapHeight function such as it swaps the css height and the data attr 'height' — , Oct 02 '20 at 14:28

score 1 · Answer 1 · answered Oct 02 '20 at 15:52

You are reading .data('height') but writing .css('height').

This is just a minor facepalm (don't worry, we all experience insufficient morning caffeine levels) about the relationship between .data('height') and .css('height'). They are completely different things.

Your swapHeight therefore doesn't swap the .data you are comparing, and things carry on in an infinite loop.

JQuery stores its .data internally, not as the height in the element's CSS style. See Where is jQuery.data() stored?

This problem is fixed. But yes, I was only changing the css and not the data attr. This was the issue. I had to change both of them (duh). But thank you for your reply :) — , Oct 03 '20 at 12:54

JavaScript bubble sort stuck in infinite loop

1 Answers1