父DIV刪除第一個div導致所有內部的div被太

刪除

<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>

我想刪除第一個div在#main一些動畫

我寫的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。我只是想刪除1格，我怎麼能做到這一點

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

編輯

我需要保存的第一個元素的引用，那麼對於所有的div和刪除後做動畫通過引用

來源

2012-07-06 ArmeniaH

我認爲你有問題，你對動畫所有您子元素，併爲每個動畫，你'重新傳遞一個回調，當它完成時執行一個回調，刪除第一個元素。你基本上在做「刪除第一個元素」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(); 
    }); 
});

Broken DEMO

Fixed DEMO

來源

2012-07-06 15:15:10

ooo我終於明白了！非常感謝 – ArmeniaH 2012-07-06 15:25:49

我不能將答案標記爲有用因爲我需要15個聲譽對不起 – ArmeniaH 2012-07-06 15:28:35

@亞美尼亞@不用擔心，只要問題得到解決。 – 2012-07-06 15:30:35

第一個div嘗試

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

來源

2012-07-06 15:07:02 Episodex

所有其它的div也將被刪除:( – ArmeniaH 2012-07-06 15:08:13

http://jsfiddle.net/LRLjY/看起來像它的工作。奇怪... – Episodex 2012-07-06 15:14:30

如果你使用'$ （'#main div：first-child'）。remove（）;'它的工作原理是一樣的，所以這不是問題 – 2012-07-06 15:16:31

嘗試使用第一選擇的，而不是第一個孩子，看到http://api.jquery.com/first-selector/

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

UPDATE：

好吧，你有沒有嘗試刪除這樣的：

$('.item').animate({ 
      "left": "-=210px" 
     }, 200, function(){ 
      $(this).remove(); 
     })

來源

2012-07-06 15:07:55 peacemaker

它刪除所有其他的div ...當我不指定class =「item」它的作品，但我需要指定相同的類爲該項目... – ArmeniaH 2012-07-06 15:10:22

相同的結果，所有的divs被刪除，因爲他們有同類 – ArmeniaH 2012-07-06 15:15:35

你想用first而不是first-child。首先獲得第一個匹配，第一個孩子獲取任何匹配元素。

$('#leftbutton').click(
    function() { 
     $('#main').append(''); 
     $('.item').animate({ "left": "-=210px" }, 200, function(){ $('.item:first').remove(); 
     }); 
    }); 
});

來源

2012-07-06 15:08:19 xanderer

它刪除所有的divs ... – ArmeniaH 2012-07-06 15:11:07

我在選擇器中犯了一個錯誤，它應該是「item：first」 – xanderer 2012-07-06 15:14:41

http://jsfiddle.net/Ks6K6/2/這裏測試過，所有div都被刪除:( – ArmeniaH 2012-07-06 15:23:02

試試這個

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

DEMO

來源

2012-07-06 15:11:48 xyz

不工作，所有div被刪除... – ArmeniaH 2012-07-06 15:13:06

@ user1507119：它的工作。檢查演示。 – xyz 2012-07-06 15:13:39

@Ajinkya它在你的演示中工作並不像問題中描述的實際情況 – 2012-07-06 15:16:51

父DIV刪除第一個div導致所有內部的div被太

回答

相關問題