5


2

jQuery +各要素の最初のインスタンスのみを選択するにはどうすればよいですか?

たとえば、次のhtmlを使用します。

Level 1 Header
My Second Level 1 Header
And a third for kicks

Level 2 Header
2nd Level 2 Header

Here is a paragraph.
Here is a paragraph number 2.
And paragraph number 3.


list item 1
list item 2
list item 3
list item 4

各要素の最初のインスタンスのみを選択するにはどうすればよいですか?

各要素の「最初」を除き、すべてを非表示にしたいと考えています。

前もって感謝します!

4 Answer


7


あなたはこのようなことをすることができるはずです:

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

各セットの最初の要素を選択してjQueryセットにします。


2


最高のパフォーマンスを得るには、非標準のセレクターを使用しないでください。シズルセレクターエンジンが、より遅い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()をaddDisplay()/ removeClass()に置き換えます。このクラスは、「表示」状態の変更を定義するクラスを追加および削除します。

さらにパフォーマンスを向上させるには、可能な場合はいつでも:first-childを使用します:http://www.w3.org/TR/CSS2/selector.html#first-child

ライブ例:http://jsfiddle.net/rwaldron/w4Wz4/


0


暗黙的にこれを行う方法はわかりませんが、最初の要素を明示的に選択するのは非常に簡単です:

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

最初を除くすべてを非表示にするには:

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

そして、Tejsから便乗します:

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


0


liの場合:

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

他のもの:

$('h1:first');

$('h2:first');

$('p:first');