Javascript jQuery只删除第一个div一次

我有一个功能：

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个以上的div，但是它只删除第一个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();
            }
        });
    }
}

函数存储俱乐部（数组）{
对于（i=0；i这是Paul Roub的答案，作为答案而不是答案发布：

可能的问题是，由于在一个循环中进行了大量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(); });
    }
}

这是Paul Roub的答案，作为答案而不是答案发布：

可能的问题是，由于在一个循环中进行了大量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(); });
    }
}

问题是：

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

它总是
0索引

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

函数removeDiv（x）{
var topmest=jQuery（'.xx'）；
var totContent=topmost.find（'.zz'）.length；
var$target=jQuery（'.xx'）.find（'.zz'）.eq（x）；
如果（总含量>5）{
$target.hide（'slow'，function（）{$target.remove（）；}）；
}
}
函数（数组）{
对于（i=0；i

注意

在上面的小提琴中，尝试将此
var$target=jQuery（'.xx'）。查找（'.zz'）.eq（x）；
harcoding将
x
的值编码为0，只会发生一次。
问题在于：

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

它总是
0索引

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

函数removeDiv（x）{
var topmest=jQuery（'.xx'）；
var totContent=topmost.find（'.zz'）.length；
var$target=jQuery（'.xx'）.find（'.zz'）.eq（x）；
如果（总含量>5）{
$target.hide（'slow'，function（）{$target.remove（）；}）；
}
}
函数（数组）{
对于（i=0；i

注意

在上面的小提琴中，尝试将这个
var$target=jQuery（'.xx'）。find（'.zz'）.eq（x）；
harcoding将
x
的值编码为0，它只会发生一次。
If语句在条件为true时只执行一次。因此，仅删除第一个div。如果所有这些ajax调用都在同一时间内完成（很可能）是的，但是OP反复调用这个函数，所以…为什么是for循环。jQuery提供了一个更灵活、更易读的替代方法
$。每个
@PaulRoub:我想你都找到了，很好。我会把它作为一个答案发布。如果statem如果条件为true，则ent只执行一次。因此，仅删除第一个div。如果所有这些ajax调用几乎同时完成（可能）是的，但是OP反复调用这个函数，所以…为什么是for循环。jQuery提供了一个更灵活、更易读的替代方法
$。每个
@PaulRoub：我想你都找到了，很好。我会把它作为一个答案发布出来。或者你也可以合作uld选择应该删除的第一个X元素，就像在我的plunk中一样我没有答案，我只是指出了问题：-）这比我建议的要干净得多。@PaulRoub:团队努力！：-）或者你可以选择应该删除的第一个X元素，就像在我的plunk中一样。我没有答案，我只是指出了问题：-）这比我建议的要干净得多。@PaulRoub:团队努力！：-）这不起作用，因为成功回调关闭变量
I
，而不是它在创建回调时的值；到调用
removeDiv
时，它们都将使用
I
在t结束时的值he循环（
array.length
）.fiddle之所以有效，是因为调用是同步的，但ajax调用不是。这可以通过使用各种技术来确保闭包关闭在某个不会更改的对象上来实现，但总体而言，我发现让元素携带状态比依赖于在其他位置跟踪状态可靠得多。这不会改变工作，因为成功回调结束于变量
i
，而不是创建回调时的值；当调用
removeDiv
时，它们将在循环结束时使用
i
的值（
array.length
）.fiddle之所以有效，是因为调用是同步的，但ajax调用不是。这可以通过使用各种技术来确保闭包在某个不变的对象上关闭来实现，但总的来说，我发现让元素携带它们的状态比依赖于在其他地方跟踪它要可靠得多。