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

Question

我有一個div列表。如果列表超過100，我只想保留最後100個項目，並刪除（刪除）所有最後100項之前的項目。如果可能，我不想調用jQuery「remove」方法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() 

要不試試this.Its快速

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

Answer 4

您可以使用nextUntil()實現這一目標，例如：

$（開始）.nextUntil（完）

$("div:eq(0)").nextUntil("div:eq(4)").remove() 
 
$("div:eq(0)").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>6</div>

你可以把它放在一個函數內並在每次需要一次刪除很多div時調用它。

Answer 5

可以連同.filter()方法

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

<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>

---

使用:lt()選擇器作爲選擇可以使用splice()以提取需要存在和更新使用.html()容器唯一元件

。

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

<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>