0

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");
}
Improve this question
5
  • You have all those great console.log messages. What did they say? Commented Oct 2, 2020 at 14:05
  • 1
    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. Commented Oct 2, 2020 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 Commented Oct 2, 2020 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: stackoverflow.com/q/5821520/1563833 Commented Oct 2, 2020 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' Commented Oct 2, 2020 at 14:28

1 Answer 1

Reset to default
1

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?

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

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 :)