удалить все ли, кроме предыдущих пяти и следующих пяти - PullRequest
Новая
       21

удалить все ли, кроме предыдущих пяти и следующих пяти

5 голосов
/ 14 марта 2012

Я хочу удалить все li в пределах ul, кроме предыдущих пяти и следующих пяти.

Например: 

<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() селекторы для исключения элементов, но до сих пор я не достиг большого прогресса.

Ответы [ 3 ]

11 голосов
/ 14 марта 2012

Если вы хотите удалить все элементы, кроме предыдущей и последующих пяти, относительно элемента, по которому щелкнули, вы можете использовать .slice() [документы] вместе с .index() [документы] : 

// 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();
2 голосов
/ 14 марта 2012

Чтобы удалить элементы, относящиеся к тому, на который был нажат, вам нужно использовать index(): 

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

Пример скрипки

UPDATE

Чтобы учесть сценарии, в которых индекс + -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();
});

Пример скрипки

1 голос
/ 14 марта 2012

Я бы использовал селекторы :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();

});

Мы выбираем все li с индексом меньше, чем нажатый минус 5, добавляем в коллекцию все li с индексом, превышающим нажатый плюс 5, и затем удаляем все эти предметы.

Еще короче: 

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

Remove() принимает дополнительный селектор для фильтрации элементов в текущем выделении с помощью.

См. Пример здесь

...