jQuery + Как я могу выбрать только первый экземпляр каждого элемента?

Question

возьмите следующий html, например:

<h1>Level 1 Header</h1>
<h1>My Second Level 1 Header</h1>
<h1>And a third for kicks</h1>

<h2>Level 2 Header</h2>
<h2>2nd Level 2 Header</h2>

<p>Here is a paragraph.</p>
<p>Here is a paragraph number 2.</p>
<p>And paragraph number 3.</p>

<ul>
<li>list item 1<li>
<li>list item 2<li>
<li>list item 3<li>
<li>list item 4<li>
</ul>

Как выбрать только первый экземпляр каждого элемента?

Я хочу скрыть все, кроме «первого» каждого элемента.

Заранее спасибо!

Answer 1

Вы должны быть в состоянии сделать что-то вроде этого:

 $('h1:first,h2:first,p:first,li:first')

Чтобы выбрать первый элемент каждого набора в набор jQuery.

Answer 2

Для лучшей производительности избегайте нестандартных селекторов, так как они заставят механизм выбора Sizzle перейти в более медленную ветвь кода non-querySelectorAll.Примеры нестандартных селекторов можно найти здесь: http://api.jquery.com/category/selectors/ (ищите любой селектор, который начинается с ":")

Имея это в виду, вы можете применить стратегию к вашим вариантам использования какследует:

$("h1").hide().eq(0).show();

$("h2").hide().eq(0).show();

$("p").hide().eq(0).show();

$("ul li").hide().eq(0).show();

Для повышения производительности бонуса замените hide () / show () на addClass () / removeClass (), который добавляет и удаляет класс, определяющий display изменения состояния.

Для еще большего повышения производительности используйте: первый ребенок, когда / где это возможно: http://www.w3.org/TR/CSS2/selector.html#first-child

Пример в реальном времени: http://jsfiddle.net/rwaldron/w4Wz4/

Answer 3

Для дела li:

// hide all li and then show the first one
$('ul li').hide().filter(':lt(1)').show(); 

Другие:

$('h1:first');

$('h2:first');

$('p:first');

Answer 4

Я не знаю, как сделать это неявно, но довольно просто явно выбрать первый элемент:

$("h1:first").show();

Чтобы скрыть все, кроме первого:

$("h1:gt(0)").hide();

И, спекуляция от Tejs:

 $("h1:gt(0),h2:gt(0),p:gt(0),li:gt(0)")