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

Question

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

排序有效，替换似乎有效，尽管它们似乎被无限次替换，而我只想将它们替换一次。

我想用类“.question”替换那些具有相同 div 的 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) 上，您选择具有类 question 的每个元素(这些可以是很多项目，就像您说的)，然后在 (2) 您正在将 replaceWith() 方法应用于这些项目中的每一个，因此具有类 question 的每个项目都将被替换为排序后的数组元素，这就是您多次看到排序数组的原因。我给你一个固定的例子，解决了这个问题并做了一些其他的修复。

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