jQuery只删除第一个div一次

时间:2014-12-15 17:31:37

标签: javascript jquery ajax

我有一个功能:

function removeDiv() {          
    var topmost = jQuery('.xx');
    var totContent = topmost.find('.zz').length;
    var $target = jQuery('.xx').find('.zz').eq(0);
    if(totContent > 5) {
        $target.hide('slow', function(){ $target.remove(); });
    }
}

我在我的ajax调用中使用它,删除额外的div然后有超过5,hovewer它只删除第一个div一次!

这就是ajax调用的样子:

function saveClubs(array) {
    for(i=0; i<array.length; i++) {
    var id = array[i];
        jQuery.ajax({
            type: "GET",
            async: true,
            url: 'index.php?option=com_events&task=club.save&id=' + id,
            dataType: 'json',
            success: function(data) {
                jQuery('.xx').append('<div class="zz">'+data+'</div>');
                removeDiv();
            }
        });
    }
}

有什么想法吗?

2 个答案:

答案 0 :(得分:3)

这是Paul Roub的回答,张贴为答案而不是comment

可能的问题是,由于你在一个循环中做了一堆ajax调用,它们往往会同时完成,所以你最终会重复淡出相同的元素(因为它一直存在,直到它完成褪色)。

最小化更改修复将是,例如,当您淡出时添加一个类:

function removeDiv() {
    // Get the container (I take it there's only one .xx element)
    var topmost = jQuery('.xx');

    // Get the child elements that aren't fading
    var zz = topmost.find('.zz').not('.fading');

    // Too many?
    if(zz.length > 5) {
        // Yup, add 'fading' to the first one and fade it out
        // Note that there's no need for the $target variable
        zz.eq(0).addClass('fading').hide('slow', function(){ $(this).remove(); });
    }
}

答案 1 :(得分:1)

问题在于:

var $target = jQuery('.xx').find('.zz').eq(0);

总是0 index

function removeDiv(x) {          
    var topmost = jQuery('.xx');
    var totContent = topmost.find('.zz').length;
    var $target = jQuery('.xx').find('.zz').eq(x);
    if(totContent > 5) {
        $target.hide('slow', function(){ $target.remove(); });
    }
}

function saveClubs(array) {
    for(i=0; i<array.length; i++) {
    var id = array[i];
        jQuery.ajax({
            type: "GET",
            async: true,
            url: 'index.php?option=com_events&task=club.save&id=' + id,
            dataType: 'json',
            success: function(data) {
                jQuery('.xx').append('<div class="zz">'+data+'</div>');
                removeDiv(i);
            }
        });
    }
}

LIVE EXAMPLE HERE

注意

在上面的小提琴中,尝试将此var $target = jQuery('.xx').find('.zz').eq(x);更改为将x的值更改为 0 ,并且只会发生一次。