2

我有这个代码

<div id="main" style="background:#aaaaaa;float:left;height:160px;margin:5px;position:relative;display:block;width:630px;">
        <div id="1" class="item" style="background:#ffaacc;float:left;width:200px;height:150px;margin:5px;position:absolute;left:0px;top:0px;">
        </div>
        <div id="2" class="item" style="background:#aaccff;float:left;width:200px;height:150px;margin:5px;position:absolute;left:210px;top:0px;">
        </div>
        <div id="3" class="item" style="background:#ffccaa;float:left;width:200px;height:150px;margin:5px;position:absolute;left:420px;top:0px;">
        </div>
</div>

我想在一些动画之后删除#main 中的第一个 div

我写了jQuery

$('#leftbutton').click(function() {
            $('#main').append('<div id='+ i++ +' class="item" style="background:#ffccaa;float:left;width:200px;height:150px;margin:5px;position:absolute;left:630px;top:0px;z-index:1"></div>');
            $('.item').animate({
                "left": "-=210px"
            }, 200, function(){
                $('#main div:first-child').remove();
            });
        });
});

但它也会删除所有其他 div。我只想删除第一个 div，我该怎么做

示例http://jsfiddle.net/Ks6K6/2/

编辑

我需要保存第一个元素的引用，然后为所有 div 制作动画，然后通过引用删除第一个 div

4

5 回答 5

4

我认为您遇到的问题是您正在对所有子元素进行动画处理，并且对于每个动画，您都传递了一个回调，该回调在完成时执行删除第一个元素。您实际上是在x多次“删除第一个元素”，其中x是动画元素的数量。

所以第一个元素动画完成，删除第一个孩子。第二个元素动画完成，它还删除了第一个孩子（之前是第二个孩子），等等。

我会在调用之前存储对要删除的特定元素的引用.animate()，然后使用该变量执行删除。

$('#leftbutton').click(function() {
    $('#main').append('<div id=' + i+++' class="item" style="background:#ffccaa;float:left;width:200px;height:150px;margin:5px;position:absolute;left:630px;top:0px;z-index:1"></div>');
    var $firstElement = $('#main div:first');
    $('.item').animate({
        "left": "-=210px"
    }, 200, function() {
       $firstElement.remove();
    });
});

破碎的演示

固定演示

于 2012-07-06T15:15:10.770 回答
3

尝试

$('div#main div').first().remove();
于 2012-07-06T15:07:02.487 回答
1

您想使用first而不是first-child。first 仅获取第一个匹配项，first-child 获取任何匹配元素。

$('#leftbutton').click(
   function() { 
       $('#main').append(''); 
       $('.item').animate({ "left": "-=210px" }, 200, function(){ $('.item:first').remove(); 
       }); 
  }); 
});
于 2012-07-06T15:08:19.053 回答
0

尝试使用第一个选择器而不是第一个孩子，请参阅http://api.jquery.com/first-selector/

$('#main div:first').remove();

更新：

好的，您是否尝试过像这样删除：

$('.item').animate({
            "left": "-=210px"
        }, 200, function(){
            $(this).remove();
        })
于 2012-07-06T15:07:55.153 回答
0

尝试这个

  $("#main div").eq(0).remove();

演示

于 2012-07-06T15:11:48.037 回答