Sélection des premiers «n» éléments avec jQuery

217

Avec Jquery, je dois sélectionner uniquement les premiers "n" éléments de la page, par exemple les 20 premiers liens au lieu de les sélectionner tous avec l'habituel

$("a")

Cela semble simple, mais le manuel jQuery n'a aucune preuve de quelque chose comme ça.

jquery Omiod
la source

Réponses:

378

Vous voulez probablement lire sur tranche . Votre code ressemblera à ceci:

$("a").slice(0,20)
dérangeant
la source
65
Bien que l' :lt(20)approche semble beaucoup plus propre, l'utilisation de la tranche est beaucoup plus efficace si vous avez un ensemble de résultats important pour commencer. Malheureusement, lors de l'évaluation de ": lt" et d'autres sélecteurs de position, jQuery parcourt l'ensemble entier , même s'il ne s'agit que du premier élément. J'ai écrit plus à ce sujet sur mon blog ici: spadgos.com/?p=51
nickf
1
Merci, une exigence secondaire de ma demande concernait les performances, donc c'est la bonne réponse pour moi. Merci aux autres d'avoir signalé aussi le sélecteur: lt.
Omiod
3
Commentaire informatif de @nickf, mais le lien du blog et le lien du graphique ne semblent pas fonctionner
Fractalf
1
Impossible de modifier maintenant désolé - en gros, l'utilisation de la tranche était beaucoup plus rapide.
nickf
92

Utilisez le pseudo sélecteur lt:

$("a:lt(n)")

Cela correspond aux éléments avant le nième (le nième élément exclu). La numérotation commence à 0.

kgiannakakis
la source
13
Selon les documents jQuery , .slice est plus rapide dans les navigateurs modernes.
Blaise
1
J'aime l'utilisation du style jQuery, c'est plus élégant que le chaînage.
Fedir RYKHTIK
22

J'ai trouvé cette note à la fin des documents lt () :

Notes supplémentaires:
Parce que: lt () est une extension jQuery et ne fait pas partie de la spécification CSS, les requêtes utilisant: lt () ne peuvent pas tirer parti de l'amélioration des performances fournie par la méthode native DOM querySelectorAll (). Pour de meilleures performances dans les navigateurs modernes, utilisez plutôt $ ("your-pure-css-selector"). Slice (0, index).

Utilisez donc $("selector").slice(from, to)pour de meilleures performances.

Arlind Nushi
la source
7

.slice () n'est pas toujours mieux. Dans mon cas, avec jQuery 1.7 dans Chrome 36, .slice (0, 20) a échoué avec l'erreur:

RangeError: taille maximale de la pile d'appels dépassée

J'ai trouvé que: lt (20) fonctionnait sans erreur dans ce cas. J'avais probablement des dizaines de milliers d'éléments correspondants.

Kevin Gwynn
la source