仅保留前三个div

Question

我拥有一个div，并在其中拥有数千个div，但我只想保留前3个，如何使其与jquery一起使用？ 例：

<div class="owner">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div> 
  <div class="child"></div> -> DELETE
  <div class="child"></div> -> DELETE
  <div class="child"></div> -> DELETE
  <div class="child"></div> -> DELETE 
  [...]
</div>

Answer 1

将:gt选择器与.hide()或.remove() ：

$('.owner .child:gt(2)').hide(); 

要么

$('.owner .child:gt(2)').remove()

Answer 2

尝试使用slice()

$('.owner .child').slice(3).remove();

Answer 3

是的，正如Milind所写，您可以通过:gt选择器将其删除。

但是还有另一种方法：

$(document).ready(function(){
   var index = $(".child").length;
   while (index--) {
       if(index > 2){
           ($('.child')[index]).remove();
       }
   }   
});

这种方式更容易理解。

我已将JSFiddle示例附加到帖子中。

Answer 4

所有这些jQuery解决方案都可以工作。 但是，如果您也想以CSS方式进行操作，则只需执行以下操作：

.owner .child:nth-child(1n+4) { display: none; }