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.

jquery Omiod
fuente

Respuestas:

378

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

$("a").slice(0,20)
istruble
fuente
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.

kgiannakakis
fuente
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.

Arlind Nushi
fuente
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.

Kevin Gwynn
fuente