Функция replaceWith (), кажется, запускается бесконечно много раз - PullRequest
Новая
       35

Функция replaceWith (), кажется, запускается бесконечно много раз

0 голосов
/ 24 октября 2018

Я пытаюсь использовать функцию jquery replaceWith (), чтобы заменить существующие div, имеющие класс «question», теми же div, только отсортированными в алфавитном порядке.

Сортировка работает, и кажется, что замена работает, хотя кажется, что они заменяются бесконечно много раз, когда я хочу заменить их только один раз.

Я хочу заменить эти div с классом '.question' на те же самые div, хотя они просто отсортированы по

. Ниже приведен скриншот исходного HTML.Обратите внимание, что есть 31 div.original HTML

Вот мой код 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 (на вид) бесконечно много раз, сследующий вывод консоли: enter image description here

Сортировка вроде бы работает, но я не хочу, чтобы она добавлялась бесконечно много раз!Я просто хочу, чтобы эти 31 div были отсортированы и отображены один раз.Есть идеи?

1 Ответ

0 голосов
/ 24 октября 2018

Основная проблема в вашем коде была в этих двух строках: 

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

Вкл. (1) вы выбираете каждый элемент, который имеет класс question (как вы говорите, это может быть много элементов), затем на (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>
...