jquery выберите всех детей после nth-child

Question

Я работаю с jquery и создаю списки show hide, мне нужно скрыть все элементы списка дочерних элементов, которые следуют за шестым ребенком в ul. Обычно я делал это, устанавливая высоту, а затем меняя высоту одним щелчком мыши, но для этого мне нужно добавить overflow:hidden в мой css, и это не вариант.

Как получить все элементы списка дочерних элементов, которые больше, чем 7-й ребенок?

Что-то подобное,

$("ul li:6n").domeSomething()

Answer 1

Как бы я получить все элементы списка ребенка, которые больше, чем 7-го ребенка?

Выберите индекс элемента = 7+

$("ul li:gt(6)").domeSomething() 

:gt selector

Селектор использует нулевой базовый индекс:

Обратите внимание, что поскольку JavaScript массивы используют 0 на основе индексирование, эти селекторы отражают этот факт. Вот почему $ ('. Myclass: gt (1)') выбирает элементы после второго элемента в документе с классом myclass, а не после первого. Напротив, nth-child (n) использует индексирование на основе 1 для соответствия спецификации CSS.

Answer 2

Попробуйте это:

$('ul li:eq(6)').nextAll().domeSomething() 

Answer 3

использовать ломтик, чтобы уменьшить набор

.slice(start[,end]) 

http://api.jquery.com/slice/

пример (отредактированный)

$("ul li").slice(6).doSomething(...) 

Answer 4

Я хотел написать свой ответ только для обсуждения двух предыдущих ответов: the answer от gdoron и the answer от neu-rah. Если бы мы увидели на счету голосования, можно увидеть, что большинство читателей лучше находят ответ Дорона. Я не согласен, и я пытаюсь объяснить, почему.

Объяснение вы найдете документацию :gt() Selector (см «Дополнительные примечания:» here):

Поскольку :gt() является расширение JQuery и не является частью спецификации CSS , запросы с использованием :gt() не может принять преимущество повышения производительности , обеспечиваемого собственным DOM querySelectorAll() . Для лучшей производительности в современных браузерах вместо этого используйте $("your-pure-css-selector").slice(index).

Вы можете проверить код с here или лучше here (с не-минимизированы кода JQuery 1.7.2). В коде используется только оператор $("ul li:gt(6)").css("color", "red");. Лучше понять проблему, если вы запустите демонстрационную версию в «Инструментах разработчика Chrome» с активированной кнопкой «Пауза на исключениях». Вы увидите следующее исключение (это будет не первый):

Таким образом, вы можете видеть, что текущая реализация JQuery попытаться использовать роднойquerySelectorAll() веб-браузер, чтобы получить лучшие представление. После этого функция $.makeArray будет использоваться для создания обертки jQuery из NodeList. В случае исключения the line

return oldSizzle(query, context, extra, seed); 

Таким образом, вы будете иметь лучшую производительность, если вы будете использовать селекторы поддерживаемые querySelectorAll(). Например

$("ul li").slice(7) 

лучше, как

$("ul li:gt(6)") 

Я бы вы рекомендовали использовать более точные селекторы всякий раз, когда это возможно. Например, если элемент родительского <ul> имеет id="menu1", то вы можете использовать

$("#menu1 >li").slice(7) 

для достижения наилучших результатов. Это поможет дополнительно в случае нескольких<ul> элементов на вашей странице.

Кто-то может упомянуть: селектор "ul li:gt(6)" работает достаточно быстро. Это правильно, но вы должны не забывать, что вы используете иногда селектор внутри цикла или используете его внутри функций, которые будут вызываться внутри петель. Таким образом, разница между 10 мс и 30 мс может быть намного более очевидной, если время выполнения будет умножено на 100.

Кроме того, кто-то задает себе вопрос, как реализовать выбор и получить ответ, он/она будет использовать код рисунок постоянно. Я думаю, что было бы лучше использовать шаблон, который имеет преимущество в производительности. Не так.

ОБНОВЛЕНО: Чтобы очистить разницу в производительности $("ul li:gt(6)"), $("ul li").slice(7) и $("#menu1 >li").slice(7) селекторов я сделал дополнительно the demo. Каждый может проверить разницу в веб-браузере, который он использует. Вы должны дополнительно не забывать, что в случае страницы с многие другие элементы, селектор id будет работать лучше.

На моем компьютере время выполнения $("ul li").slice(7) и $("#menu1 >li").slice(7) примерно одинаковы (страницы имеют очень маленькие элементы) и примерно 2,5-4,5 раз лучше как для $("ul li:gt(6)"). Результаты могут зависеть от количества элементов li, количества элементов на странице и многих других вещей, но я надеюсь, что тест ясно показал, что использование slice имеет преимущество в производительности по сравнению с использованием :gt (точно так же, как мы может читаться в документации jqGrid, о которой упоминалось ранее).