jQuery 删除 .each 迭代中的多个最后一项

发布于 2024-10-27 22:39:06 字数 653 浏览 3 评论 0原文

当使用 .each 添加新内容时，我无法从定义列表中删除最后一个 DD 和 DT 标签。我的目标是在每次迭代时删除一组 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，并且已经在这个问题上停留了一段时间。在每次迭代中从列表末尾删除项目的好方法是什么？

原文

I am having trouble removing the last DD and DT tags from a definition list when prepending new content using .each. My goal is to remove a set of DD and DT tags with each iteration (as new DD and DT tags are prepended). The following is example code I am using:

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();
        });

Each time my json object contains multiple items, only one set of DT and DD are removed from the end.

I am learning jQuery and JavaScript slowly and have been stuck on this issue for a while. What would be a good way to remove items from the end of the list for each iteration?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

清风无影 2024-11-03 22:39:06

仅从列表中删除一个元素，因为在第一个 slideUp 调用完成之前，each 循环正在遍历 json.shouts 中的所有项目（即循环太快或slideUp太慢）。这意味着每次执行时：

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

始终会找到列表中原始的最后一项，因此您实际上是在同一元素 json.shouts.length 上调用 slideUp次数。您需要在每个循环开始之前获取列表中的所有原始项目，并向后计数以为每个添加的新项目删除一个。

这应该可以解决问题：

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();
});

Only one element is being removed from the list because the each loop is going through all the items in json.shouts before the first slideUp call finishes (ie the loop is too fast or slideUp is too slow). This means that each time this executes:

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

the original last item in the list is always being found, so you're actually calling slideUp on the same element json.shouts.length number of times. You need to get all the original items in the list before the each loop starts and count backwards to remove one for each new item added.

This should do the trick:

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();
});

回复收藏 0 原文

~没有更多了~