jquery - 删除除前五个和后五个之外的所有 li

Question

我想删除 ul 中的所有 li，除了前五个 li 和后五个 li。

例如:

<ul>
    <li id="Li0"></li>
    <li id="Li1"></li>
    <li id="Li2"></li>
    <li id="Li3"></li>
    <li id="Li4"></li>
    <li id="Li5"></li>
    <li id="Li6"></li>
    <li id="Li7"></li>
    <li id="Li8"></li>
    <li id="Li9"></li>
    <li id="Li10"></li>
    <li id="Li11"></li>
    <li id="Li12"></li>
    <li id="Li13"></li>
    <li id="Li14"></li>
    <li id="Li15"></li>
    <li id="Li16"></li>
    <li id="Li17"></li>
    <li id="Li18"></li>
    <li id="Li19"></li>
    <li id="Li20"></li>
</ul>

假设我点击 Li(id Li9)。所以结果应该是

 <ul>
    <li id="Li4"></li>
    <li id="Li5"></li>
    <li id="Li6"></li>
    <li id="Li7"></li>
    <li id="Li8"></li>
    <li id="Li9"></li>
    <li id="Li10"></li>
    <li id="Li11"></li>
    <li id="Li12"></li>
    <li id="Li13"></li>
    <li id="Li14"></li>
</ul>

我知道有 :lt() 和 :gt() 选择器用于排除元素，但到目前为止我还没有取得太大进展。

Answer 1

如果你想删除相对于被点击的元素除了前面和后面五个之外的所有元素，可以使用 .slice() ^[docs]与 .index() ^[docs] 一起:

// assuming `this` refers to the clicked li element
var index = $(this).index(),
    $lis = $(this).parent().children();

// Math.max(...) guarantees that we are not removing from 0 to the end of
// the list of `index - 5` is negative.
// Alternatively you can use `5 > index ? 0 : index - 5`
$lis.slice(0, Math.max(0, index - 5)).add($lis.slice(index + 6)).remove();

<小时/>

这是“删除列表中除第一个和最后五个元素之外的所有元素”问题的答案。

使用 .slice() ^[docs] 很容易做到这一点:

$('ul > li').slice(5, -5).remove();