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>