javascript - 如何删除第 3 个之后的每个 {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 selector :

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

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

或者如果您不喜欢使用 jQuery 的扩展选择器(因为它们不能传递给浏览器自己的选择器引擎)，您可以使用 .filter过滤 child :

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

如果它们是唯一的 child ，您可以使用.children 代替该选择器的> .child 部分:

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