jQuery + ¿Cómo puedo seleccionar solo la primera instancia de cada elemento?

Question

tomar el siguiente código HTML por ejemplo:

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

¿Cómo puedo seleccionar sólo la primera instancia de cada elemento?

Estoy buscando para ocultar todo, a excepción de "primero" de cada elemento.

¡Gracias de antemano!

Answer 1

Usted debe ser capaz de hacer algo como esto:

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

para seleccionar el primer elemento de cada conjunto en un conjunto de jQuery.

Answer 2

No sé cómo hacer esto de manera implícita, pero es bastante fácil seleccionar el primer elemento de forma explícita:

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

Para ocultar todos menos el primero:

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

Y, que lleva a cuestas fuera de Tejs:

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

Answer 3

Para el caso li:

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

Los otros:

$('h1:first'); 

$('h2:first'); 

$('p:first'); 

Answer 4

Para un mejor rendimiento, evite selectores no estándar, ya que la fuerza del motor selector de chisporroteo en la rama de código más lento no querySelectorAll. Los ejemplos de selectores no estándar se pueden encontrar aquí: http://api.jquery.com/category/selectors/ (buscar cualquier selector que comienza con ":")

Con esto en mente, se puede aplicar la estrategia de sus casos de uso de la siguiente manera:

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

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

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

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

Para mejoras de rendimiento adicionales, reemplace hide()/show() con addClass()/removeClass() que agrega y elimina una clase que define display cambios de estado.

Para aún más mejoras en el rendimiento, utilice: first-child siempre/siempre que sea posible: http://www.w3.org/TR/CSS2/selector.html#first-child

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