replaceWith() function seems to run infinitely many times

Question

I am trying to use the jquery function replaceWith() to replace the existing div's that have the class of "question" with those same div's, just sorted in alphabetical order.

The sort is working, and the replace seems to be working, though they seem to get replaced infinitely many times, when I only want to get them replaced once.

I want to replace with those div's with the class '.question' with those same div's, though just sorted with

See below for a screenshot of the original HTML. Note that there are 31 div's.

Here is my javascript code:

$(document).ready(function()
{
    // Sorting function

    function getSorted(selector, attrName)
    {
        return $($(selector).toArray().sort(function(a, b)
        {
            var aVal = parseInt(a.getAttribute(attrName)),
            bVal = parseInt(b.getAttribute(attrName));
            return aVal - bVal;
        }));
    }

    var sortedItems = getSorted('div.question', 'data-answerCount').clone();
    var unsortedQuestionItems = $('.question');
    console.log("Replacing unsorted question items with sorted question items");
    console.log("oldArray is of length: " +unsortedQuestionItems.length);
    console.log("newArray is of length: " +sortedItems.length);
    unsortedQuestionItems.replaceWith(sortedItems);
    console.log("Replacing completed.");

    var afterReplaced = $('.question');
    console.log("After replacing, the length of .question is: " +afterReplaced.length);
}); //ends the document.ready function

When I try to load the page, it replaces those div's (seemingly) infinitely many times, with the following console output:

The sort seems to be working, but I don't want it to be appended infinitely many times! I just want those 31 div's to be sorted and displayed once. Any ideas?

Answer 1

The main problem in your code was at these two lines:

(1) var unsortedQuestionItems = $('.question');
...
(2) unsortedQuestionItems.replaceWith(sortedItems);

On (1) you are selecting each element that have the class question (these can be a lot of items, like you say), then on (2) you are appliyng the replaceWith() method to each one of these items, so every item with class question will be replaced by the sorted array of elements, thats the reason you see the sorted array multiples times. I give you a fixed example where this problem is approached and made some other fixes.

$(document).ready(function()
{
    // Define the sorting function
    // NOTE: sort() is applied without converting to array.

    function getSorted(selector, attrName)
    {
        return $(selector).sort(function(a, b)
        {
            var aVal = parseInt(a.getAttribute(attrName));
            var bVal = parseInt(b.getAttribute(attrName));
            return aVal - bVal;
        });
    }

    // Get sorted and unsorted elements.

    var sortedItems = getSorted('div.question', 'data-answerCount');
    var unsortedQuestionItems = $('.question');

    console.log("Replacing unsorted question items with sorted question items");
    console.log("oldArray is of length: " + unsortedQuestionItems.length);
    console.log("newArray is of length: " + sortedItems.length);

    // Replace old unsorted elements with sorted elements.

    unsortedQuestionItems.parent().empty().append(sortedItems);

    console.log("Replacing completed.");
    var afterReplaced = $('.question');
    console.log("After replacing, the length of .question is: " + afterReplaced.length);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container questions-container">
  <div class="question" data-answercount="16">16</div>
  <div class="question" data-answercount="4">4</div>
  <div class="question" data-answercount="10">10</div>
  <div class="question" data-answercount="4">4</div>
  <div class="question" data-answercount="5">5</div>
</div>