2009-06-20 9 views
11

Estoy intentando configurar mi selector de jQuery pero no estoy seguro de cómo debo escribirlo.Seleccione Nth hermano anterior en jQuery?

Tengo una lista desordenada que se ve algo como esto:

<ul> 
    <li>something</li> 
    <li>something</li> 
    <li>something</li> 
    <li>something</li> 
    <li class="last">something</li> 
</ul> 

Ahora sé si quiero seleccionar el último hijo que puedo hacerlo utilizando cualquiera "ul li.last" o " ul.li:last "pero di si quería el segundo de último, o tercero, o 20 °? ¿Ahora haría eso?

Respuesta

17

Se utilizan eq:

$('ul li').eq(X); 

Cuando X es un índice de 0 a base de los cuales el elemento que desee. También es posible usar el selector form:

$('ul li:eq(X)'); 

Y también se puede lograr un resultado similar mediante el uso de nth-child:

$('ul li:nth-child(X)'); 

La documentación tiene esto que decir acerca de la diferencia entre nth-child y eq:

Mientras: eq (índice) coincide con un solo elemento, esto coincide con más de uno: uno para cada padre con índice. Múltiple para cada padre con par, impar o ecuación. El índice especificado tiene un índice, en contraste con: eq() que comienza en cero.

Así que haciendo $('ul li').eq(19); que se obtendría el único elemento 20a de la consulta emparejado (así que si hay más de una lista en el documento esto le consigue todos los niños "19", mientras que $('ul li:nth-child(20)'); le conseguiría el 20 emparejado elemento individual de cada lista <ul> en el documento

EDITAR:.

hacer algo como "penúltimo", la manera sensata de hacerlo sería como:

var $ul = $('#mylist > li'); 
var $el = $ul.eq($ul.length-2); 

Pero probablemente debería hacer una comprobación para asegurarse de longitud-2 no es inferior a 0.

0

Por tercera y XX, se puede hacer ul li:eq(3) y ul li:eq(20). Para el penúltimo, es posible que pueda hacer algo con la opción de argumento nth-childequation, aunque no estoy seguro.

0
alert($('ul li').eq(3).text()); 

Eso alertará al texto del tercer elemento de la lista.

3

¿Desea la 3ra desde la última?

var $ul = $("ul li"); 
$ul.find(":eq(" + Math.max(0, $ul.length - 3) + ")"); 

explicación rápida: La longitud de $ ul (que es un objeto jQuery) es como se encuentran muchos de Li. Entonces puede usar eso junto con el selector ": eq (n)" para obtener el valor li en el índice deseado.

Utilicé Math.max en caso de que la lista fuera demasiado corta (menos de 3 li).

Esto también funciona, pero no es, obviamente, la mejor manera:

var $ul = $("ul li:last").prev().prev(); 
Cuestiones relacionadas