只保留前三个div

Question

我拥有一个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

所有这些jquery解决方案的工作。但是如果你也想用CSS的方式做，你可以简单地做：

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

Answer 2

使用:gt选择与.hide()或.remove()沿：

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

或

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

Answer 3

尝试使用slice()

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

Answer 4

是的，正如米林德写的，你可以通过:gt选择删除它们。

但还有另一种方式来做到这一点：

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

这种方式更容易理解。

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