javascript - 如何删除第三个之后的每个 {element}？

Question

我有一个需要在特殊场合使用 jQuery 修剪的对象列表。出于意图和目的，假设它看起来像这样：

<div id="container">
    <div class="child one">stuff</div>
    <div class="child two">stuff</div>
    <div class="child three">stuff</div>
    <div class="child four">stuff</div>
    <div class="child five">stuff</div>
</div>

有没有一种简单的方法（如果需要的话，使用 jQuery，纯 JS）.child在第三个之后删除“每个”？

注意：.one, .two .three不一定按数字顺序。

Answer 1

是的，使用:gt选择器：

$("#container > .child:gt(2)").remove();

...这意味着“选择所有.child直接子元素#container并且索引为 2 或更高（索引从 0 开始）的元素。

或者如果你不喜欢使用 jQuery 的扩展选择器（因为它们不能被传递给浏览器自己的选择器引擎），你可以使用.filter来过滤孩子：

$("#container > .child").filter(function(index) {
    return index > 2;
}).remove();

如果他们是唯一的孩子，您可以使用.children而不是> .child该选择器的一部分：

$("#container").children().filter(function(index) {
    return index > 2;
}).remove();

Answer 2

使用 :gt() 选择器和 .remove()

$(document).ready(function(){
$('#container .child:gt(2)').remove();
});

演示视图

Answer 3

$('.child').gt(2).remove();

这里 gt 表示大于