jQuery + Come posso selezionare solo la prima istanza di ciascun elemento?

Question

prendere il seguente codice HTML per esempio:

<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> 

Come posso selezionare solo la prima istanza di ogni elemento?

Sto cercando di nascondere tutto, in eccezione del "primo" di ogni elemento.

Grazie in anticipo!

Answer 1

Si dovrebbe essere in grado di fare qualcosa di simile:

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

Per selezionare il primo elemento di ogni set in un set jQuery.

Answer 2

non so come fare in modo implicito, ma è abbastanza facile da selezionare il primo elemento in modo esplicito:

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

per nascondere tutti, ma il primo:

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

E, bagarinaggio off di Tejs:

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

Answer 3

Per il caso li:

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

Gli altri:

$('h1:first'); 

$('h2:first'); 

$('p:first'); 

Answer 4

Per prestazioni ottimali, evitare selettori non standard, in quanto saranno forzare il motore selettore Sizzle nel ramo lento codice non querySelectorAll. Esempi di selettori non standard possono essere trovate qui: http://api.jquery.com/category/selectors/ (cercare qualsiasi selettore che inizia con ":")

Con questo in mente, è possibile applicare la strategia per i vostri casi d'uso come segue:

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

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

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

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

Per miglioramenti delle prestazioni bonus, sostituire hide()/show() con addClass()/removeClass() che aggiunge e rimuove una classe che definisce le modifiche allo stato display.

Per ulteriori miglioramenti delle prestazioni, utilizzare: first-child ogniqualvolta/ove possibile: http://www.w3.org/TR/CSS2/selector.html#first-child

esempio vivo: http://jsfiddle.net/rwaldron/w4Wz4/