Выберите все дочерние элементы, кроме первого

83

Скажем, у меня есть следующее:

<ul>
 <li>First item</li>
 <li>Second item</li>
 <li>Third item</li>
</ul>

Как выбрать все дочерние элементы после первого с помощью jQuery? Итак, я могу добиться чего-то вроде:

<ul>
 <li>First item</li>
 <li class="something">Second item</li>
 <li class="something">Third item</li>
</ul>
Крис Канал
источник

Ответы:

138

Вы должны уметь использовать селекторы «не» и «первый ребенок».

$("li:not(:first-child)").addClass("something");

http://docs.jquery.com/Selectors/not

http://docs.jquery.com/Selectors/firstChild

тёрнт
источник
Я пробовал это: $ ('. CertificateList input: checkbox: not (: first-child)'), но это не сработало ....
Крис Канал,
Будет ли это медленнее, чем метод Slice, указанный ниже?
Крис Марасти-Георг,
36

Основываясь на моем совершенно ненаучном анализе этих четырех методов, похоже, что между ними нет большой разницы в скорости. Я запускал каждый на странице, содержащей серию неупорядоченных списков разной длины, и рассчитывал их по времени с помощью профилировщика Firebug.

$("li").slice(1).addClass("something");

Среднее время: 5,322 мс

$("li:gt(0)").addClass("something");

Среднее время: 5.590 мс

$("li:not(:first-child)").addClass("something");

Среднее время: 6.084 мс

$("ul li+li").addClass("something");

Среднее время: 7,831 мс

тёрнт
источник
3
Я столкнулся с этим вопросом, потому что мне нужно было получить всех детей, кроме первого. Я делал это на всех h3, которые были в div. Я выполнил три запроса, как у вас, на моей странице, и получил: not (: first-child) как самый быстрый в 2-3 раза. Я думаю, что то, как структурирована ваша страница, также может влиять на скорость профиля. В любом случае, этот ответ научил меня использовать профилировщик Firebug, и я благодарю вас за это.
RedWolves,
13

http://docs.jquery.com/Traversing/slice

$("li").slice(1).addClass("something");
Джонни Бьюкенен
источник
Это хороший ответ, но я чувствую, что выбрал в качестве ответа более явное использование. Любой новичок в проекте будет быстрее понимать, что делается в селекторе.
Крис Канал,
9

Более элегантный запрос (выберите все элементы li, которым предшествует элемент li):

$('ul li+li')

Сергей Ильинский
источник
1
$ ("li + li"), скорее всего, будет работать быстрее, чем $ ("li: not (: first-child)")
Сергей Ильинский
3

я бы использовал

$("li:gt(0)").addClass("something");
Игну
источник
2

Это должно работать

$('ul :not(:first-child)').addClass('something');
Пэт
источник
1

Это то, над чем я работаю до сих пор

$('.certificateList input:checkbox:gt(0)')
Крис Канал
источник
0

Используйте метод jQuery .not ()

$('li').not(':first').addClass('something');

ИЛИ ЖЕ

var firstElement = $('li').first();
$('li').not(firstElement).addClass('something');
Аалов
источник