Selección de los primeros elementos "n" con jQuery


217

Con Jquery, necesito seleccionar solo los primeros "n" elementos de la página, por ejemplo, los primeros 20 enlaces en lugar de seleccionarlos todos con el habitual

$("a")

Suena simple pero el manual de jQuery no tiene evidencia de algo como esto.

Respuestas:


378

Probablemente quieras leer sobre rebanada . Su código se verá así:

$("a").slice(0,20)

65
Aunque el :lt(20)enfoque parece mucho más limpio, el uso de la división es mucho más eficiente si tiene un gran conjunto de resultados para comenzar. Desafortunadamente, al evaluar ": lt" y otros selectores posicionales, jQuery recorre todo el conjunto , incluso si solo está obteniendo el primer elemento. He escrito más sobre esto en mi blog aquí: spadgos.com/?p=51
nickf

1
Gracias, un requisito adicional de mi solicitud fue sobre actuaciones, por lo que esta es la respuesta correcta para mí. Gracias a los demás por señalar también el selector: lt.
Omiod

3
Comentario informativo de @nickf, pero el enlace del blog y el gráfico no parecen funcionar
Fractalf

1
No se puede editar ahora, lo siento, básicamente, usar el corte fue mucho más rápido.
nickf

92

Utilice lt pseudo selector:

$("a:lt(n)")

Esto coincide con los elementos anteriores al enésimo (excluido el enésimo elemento). La numeración comienza desde 0.


13
Según los documentos de jQuery , .slice es más rápido en los navegadores modernos.
Blaise

1
Me gusta el uso del estilo jQuery, es más elegante que encadenar.
Fedir RYKHTIK

22

Encontré esta nota al final de los documentos lt () :

Notas adicionales:
Debido a que: lt () es una extensión jQuery y no forma parte de la especificación CSS, las consultas que utilizan: lt () no pueden aprovechar el aumento de rendimiento proporcionado por el método DOM querySelectorAll () nativo. Para un mejor rendimiento en los navegadores modernos, use $ ("your-pure-css-selector"). Slice (0, index) en su lugar.

Así que úsalo $("selector").slice(from, to)para mejores actuaciones.



7

.slice () no siempre es mejor. En mi caso, con jQuery 1.7 en Chrome 36, .slice (0, 20) falló con un error:

RangeError: se excedió el tamaño máximo de la pila de llamadas

Descubrí que: lt (20) funcionó sin error en este caso. Probablemente tenía decenas de miles de elementos coincidentes.


Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.