Question

我想删除li中的所有ul，除了之前的五个lis和下一个五个lis。

例如：

<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();

Answer 2

要删除相对于点击的元素，您需要使用index()：

$("li").click(function() {
    var $li = $('ul > li').slice($(this).index() - 5, $(this).index() + 6)
   $('ul > li').not($li).remove();
});

Example fiddle

<强>更新

要考虑index + -5超出li索引范围的情况，请尝试以下方法：

$("li").click(function() {
    var start = $(this).index() - 5;
    var end = $(this).index() + 6;
    var $li = $("ul > li");

    start = (start < 0) ? 0 : start;
    end = (end > $li.length) ? $li.length : end;

    var $keepLi = $li.slice(start, end)
    $li.not($keepLi).remove();
});

Example fiddle

Answer 3

如上所述，我会使用:lt()和:gt()选择器。

$('ul').on('click', 'li', function (e) {
    index = $(this).index();
    $('ul > li:lt(' + (index - 5) + ')').
        add($('ul > li:gt(' + (index + 5) + ')')).remove();
    e.preventDefault();

}）;

我们选择索引小于点击的减去5的所有li，将索引大于点击的所有li添加到集合中加5 ，然后删除所有这些项目。

更短：

$('ul > li').remove(':lt(' + (index - 5) + '), :gt(' + (index + 5) + ')');

Remove()接受一个可选的选择器来过滤当前选择中的元素。

参见示例here

删除除前五个lis和下一个五个lis之外的所有li

3 个答案: