JQuery удалить несколько последних элементов на каждой итерации - PullRequest
Новая
       4

JQuery удалить несколько последних элементов на каждой итерации

0 голосов
/ 31 марта 2011

У меня проблемы с удалением последних тегов DD и DT из списка определений при добавлении нового контента с использованием .each. Моя цель - удалить набор тегов DD и DT с каждой итерацией (так как добавляются новые теги DD и DT). Ниже приведен пример кода, который я использую: 

shouts_list = $("#shouts dl#shouts_list");
$.each(json.shouts, function (id, shout) {
            $("<dt>" + shout.name + "</dt><dd>" + shout.message +  "</dd>").hide().prependTo(shouts_list).slideDown('slow', 'swing', function() {
            $("#shouts_list > dt:last, #shouts_list > dd:last").slideUp('slow', 'swing');
            }).fadeIn();
        });

Каждый раз, когда мой объект json содержит несколько элементов, с конца удаляется только один набор DT и DD.

Я медленно изучаю jQuery и JavaScript и некоторое время зависал в этом вопросе. Как можно было бы удалять элементы из конца списка для каждой итерации?

1 Ответ

1 голос
/ 31 марта 2011

Из списка удаляется только один элемент, поскольку цикл each проходит через все элементы в json.shouts до того, как завершится первый вызов slideUp (т.е. цикл слишком быстрый или слишком медленный slideUp). Это означает, что каждый раз, когда это выполняется: 

$("#shouts_list > dt:last, #shouts_list > dd:last").slideUp('slow', 'swing');

всегда находится последний последний элемент в списке, так что вы действительно вызываете slideUp для одного и того же элемента json.shouts.length количество раз. Вам нужно получить все исходные элементы в списке до начала каждого цикла и сосчитать в обратном порядке, чтобы удалить по одному для каждого добавленного нового элемента.

Это должно сработать: 

shouts_list = $("#shouts dl#shouts_list");
var existingDts = shouts_list.find("> dt");
var existingDds = shouts_list.find("> dd");

$.each(json.shouts, function (id, shout) {
     $("<dt>" + shout.name + "</dt><dd>" + shout.message +  "</dd>")
       .hide().prependTo(shouts_list)
       .slideDown('slow', 'swing', function() {
           $(existingDts[existingDts.length - 1 - id]).slideUp('slow', 'swing');
           $(existingDds[existingDds.length - 1 - id]).slideUp('slow', 'swing');
     })
    .fadeIn();
});
...