jquery - 使用 JQuery 从容器末尾删除项目

Question

我有一个使用前置方法进入列表的项目提要。我一直在搜索，但找不到从末尾删除 X 个项目的方法 - 以防止其溢出。

如何使用 jquery 从此列表中删除最后 3 个元素？

<div id="feed">
<ul>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
</div>

Answer 1

您可以使用.slice() method从 jQuery 对象中删除最后三个元素:

$('#feed li').slice(-3).remove();

片段:

$('#feed li').slice(-3).remove();

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

<小时/>

或者，您也可以使用 jQuery :gt() selector并为索引指定一个负数。请记住，此选择器的索引是从零开始的，这意味着 -4 将用于删除最后三个元素。

$('#feed li:gt(-4)').remove();

片段:

$('#feed li:gt(-4)').remove();

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