只保留前三个div

时间:2014-10-26 14:17:18

标签: javascript jquery html execute

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

4 个答案:

答案 0 :(得分:2)

使用:gt选择器以及.hide().remove()

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

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

答案 1 :(得分:0)

尝试使用slice()

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

答案 2 :(得分:0)

是的,正如Milind所写,你可以通过:gt选择器删除它们。

但还有另一种方法:

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

这种方式更容易理解。

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

答案 3 :(得分:0)

所有这些jquery解决方案都有效。但如果你也想用CSS方式做,你可以简单地做:

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