Question

我有一个div列表。如果列表超过100，我想只保留最后100个项目并删除（删除）最后100个项目之前的所有项目。我不想调用jQuery＆＃34;删除＆＃34;方法x尽可能多次，因为这可能是性能问题。我以为我可以使用拼接方法，但这不起作用：

$(divList.children()).splice(0, divList.children().length - 100);

还有其他建议吗？

编辑：我的问题似乎并不清楚，因为下面的每个答案都会导致选择要删除的项目并在该选择上调用remove方法。这导致每次要删除每个div时调用remove方法。我想避免这种情况，因此我上面发布的解决方案我认为会一举删除整个数组范围。我正在寻找一种不使用remove方法的解决方案。

Answer 1

如果它们处于同一级别，您可以尝试类似

的内容

$('div:nth-of-type(2) ~ div').remove(); //replace 2 with 100

$('div:nth-of-type(2) ~ div').remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>

这里，在上面的例子中，有五个项目，选择器选择第二个div元素之后的所有div元素，在您的情况下将为100.其余的将被删除

Answer 2

使用:gt()选择器

从0开始

描述：选择匹配集中索引大于索引的所有元素。

$( "div:gt(2)" ).remove( );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>

Answer 3

试试这个非常简单的

$("div:lt(100)").remove()

或者试试这个。快点

divlist = $("container")
divlist.children().splice(0,divlist.children().length-100).remove()

Answer 4

您可以使用nextUntil()来实现此目标，例如：

$（开始）.nextUntil（结束）

＆＃13;

$("div:eq(0)").nextUntil("div:eq(4)").remove()
$("div:eq(0)").remove()

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>

＆＃13;

你可以将它放在一个函数中，并在每次需要一次删除很多div时调用它。

Answer 5

您可以使用:lt()选择器和.filter()方法

＆＃13;

var divList = $(".container").children();
divList.filter(':lt(' + (divList.length - 2) + ')').remove();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

＆＃13;

作为替代方案，您可以使用splice()仅提取需要存在的元素，并使用.html()更新容器

＆＃13;

var container = $(".container");
var divList = container.children();
container.html(divList.splice(divList.length - 2)) ;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

＆＃13;

删除一系列元素的最快方法

5 个答案: