replaceWith() 函数似乎无限次运行

Question

我正在尝试使用 jquery 函数 replaceWith() 将具有“问题”类的现有 div 替换为相同的 div，只是按字母顺序排序。

排序正在起作用，并且替换似乎正在起作用，尽管它们似乎被无限次替换，而当我只想将它们替换一次时。

我想用那些相同的 div 用类 '.question' 替换那些 div，尽管只是排序

请参阅下面的原始 HTML 屏幕截图。 请注意，有 31 个 div。

这是我的 javascript 代码：

$(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

当我尝试加载页面时，它会用以下控制台输出无限次地替换那些 div（看似）：

排序似乎有效，但我不希望它无限次追加！ 我只想对那些 31 个 div 进行排序并显示一次。 有任何想法吗？

Answer 1

您代码中的主要问题在于这两行：

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

在(1) 上，您正在选择具有类问题的每个元素（这些可以是很多项目，就像您说的那样），然后在(2) 上，您将replaceWith()方法应用于这些项目中的每一个，所以每个带有类问题的项目将被排序的元素数组替换，这就是您多次看到排序数组的原因。 我给你一个固定的例子，其中解决了这个问题并做了一些其他的修复。

 $(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>