-1

当页面第一次加载时，兄弟姐妹的 .length 返回假设为 3。然后“点击”事件触发帖子，成功删除兄弟姐妹并再次调用 .length，但它继续返回 3。

请注意，每个兄弟姐妹都是通过随机时间的“点击”事件而不是在同一个循环中删除的。

示例：（此处手动编码，但应解释行为）

<ul id="un33k">
    <li><a class="clicked" href="/link/1">Link 1</a></li>
    <li><a class="clicked" href="/link/2">Link 2</a></li>
    <li><a class="clicked" href="/link/3">Link 3</a></li>
    <li><a class="clicked" href="/link/4">Link 4</a></li>
</ul>

$(document).ready(function(){
    var total_li = $('#un33k').children().length; // 3 (test only)

    $('a.clicked').click(function () {
        var me = this;
        $.post('somelink', {...}, function(data, status) { // assuming success
            var new_total_li =  $(me).closest('li').siblings().length; // 3, good
            var parent = $(me).closest('li').parent() // can't hardcode id
            $(me).closest('li').remove(); // assuming the clicked li is gone now
            new_total_li =  $(parent).children().length; // 3, but should be 2 now?
        }, "json");
    });
});

即使几分钟后单击，仍然会显示 3。为什么？

更新：在此处复制实际代码：

这一行是罪魁祸首（console.log($(me).closest('li').siblings().length），无论删除多少兄弟姐妹，它都会显示相同的初始数字。

<script>
$(document).ready(function(){
    $('a.get2post').click(function () {
        var me = this;
        var url = $(me).attr('href');
        if ($(me).hasClass('confirm')){
            if(!window.confirm("Are you sure?")){
                return false;
            }
        }
        if ($(me).hasClass('deletion')){
            var postdata = {ajax: 'true' };
            $.post(url, postdata, function(data, status) {
                if (status == 'success'){
                    $(me).closest('li').hide('slow', function(){ $(me).remove(); });
                    console.log($(me).closest('li').siblings().length) // problem
                }
            }, "json");
       }
       return false;
    });
});
</script>
4

1 回答 1

1

你的问题是$(me).remove();线路。那就是删除<a>元素，因为me引用this，它是a.get2post元素。我不确定您要完成什么 - 删除<a>或<li>，但是当您从 获取计数时$(me).closest('li').siblings().length，您正在引用<li>元素。删除<a>with$(me).remove();不会影响<li>元素的集合。因此，您需要决定在您的情况下删除和计数的含义。

您的工作流程是这样的：隐藏 parent <li>，删除<a>被引用的，然后获取<li>兄弟姐妹的数量。永远不会删除，因此计数将<li>始终相同，尽管有些被隐藏。

看看这段代码：

$(document).ready(function(){
    $('a.get2post').click(function () {
        var me = $(this);
        var parent_li = me.closest("li");
        var url = "/echo/json/";//$(me).attr('href');
        if (me.hasClass('confirm')){
            if(!window.confirm("Are you sure?")){
                return false;
            }
        }
        if (me.hasClass('deletion')){
            var postdata = {stuff: 'stuff' };
            $.post(url, postdata, function(data, status) {
                if (status == 'success'){
                    parent_li.hide('slow', function () {
                        $(this).remove();
                    });
                    console.log(parent_li.siblings().length) // problem
                }
            }, "json");
       }
       return false;
    });
});

http://jsfiddle.net/CTC3J/

<li>它实际上在隐藏目标元素后删除了它。

于 2013-02-14T18:35:20.480 回答