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はアニメーション化されている要素の数です。

これで、最初の要素のアニメーションが完了し、最初の子が削除されます。2番目の要素のアニメーションが完了し、最初の子（以前は2番目の子であったもの）なども削除されます。

呼び出す前に削除する特定の要素への参照を保存し、.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-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 に答える