Sélectionnez Nième frère précédent dans jQuery?
-
06-07-2019 - |
Question
J'essaie de configurer mon sélecteur jQuery mais je ne sais pas exactement comment je dois l'écrire.
J'ai une liste non ordonnée qui ressemble à ceci:
<ul>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li class="last">something</li>
</ul>
Maintenant, je sais que si je veux sélectionner le dernier enfant, je peux le faire en utilisant & "; ul li.last &"; ou " ul.li: last " mais dire si je voulais le deuxième du dernier, ou le troisième, ou le 20? Maintenant, est-ce que je ferais ça?
La solution
Vous utilisez eq
:
$('ul li').eq(X);
Où X est un index à base 0 de quel élément vous voulez. Vous pouvez également utiliser le formulaire de sélection :
$('ul li:eq(X)');
Vous pouvez également obtenir un résultat similaire en utilisant nth-child
:
$('ul li:nth-child(X)');
La documentation a ceci à dire sur la différence entre $('ul li').eq(19);
et $('ul li:nth-child(20)');
:
Alors que: eq (index) correspond à un seul élément, cela correspond à plus d'un: un pour chaque parent avec index. Multiple pour chaque parent avec pair, impair ou équation. L’index spécifié est un index, contrairement à: eq () qui commence à zéro.
Ainsi, en obtenant <ul>
, vous obtiendrez le seul élément correspondant à la vingtième de la requête (ainsi, s'il y a plus d'une liste dans le document, cela ne vous donnera pas & "tous les 19ème enfant &" ;, tandis que <=> vous obtiendrez le 20ème élément de liste correspondant de chaque <=> dans le document.
MODIFIER :
Pour faire quelque chose comme & "Avant-dernier" & ";", la meilleure façon de le faire serait de:
var $ul = $('#mylist > li');
var $el = $ul.eq($ul.length-2);
Mais vous devriez probablement faire une vérification pour vous assurer que la longueur 2 n'est pas inférieure à 0.
Autres conseils
Voulez-vous le 3ème du dernier?
var $ul = $("ul li");
$ul.find(":eq(" + Math.max(0, $ul.length - 3) + ")");
Explication rapide: la longueur de $ ul (qui est un objet jQuery) correspond au nombre de li trouvés. Vous pouvez donc utiliser cela avec le & Quot;: eq (n) & Quot; sélecteur pour obtenir le li à l’index souhaité.
J'ai utilisé Math.max au cas où la liste serait trop courte (moins de 3 li).
Cela fonctionnera aussi, mais ce n'est évidemment pas la meilleure façon:
var $ul = $("ul li:last").prev().prev();
Pour le troisième et le vingtième, vous pouvez faire ul li: eq (3)
et ul li: eq (20)
. Avant-dernier, vous pourrez peut-être faire quelque chose avec nth-child
< L'option d'argument equation
de / a>, bien que je ne sois pas sûr.
alert($('ul li').eq(3).text());
Cela alertera le texte du troisième élément de la liste.
L’équipe de jQuery a ajouté cette fonctionnalité à la version 1.9
Vous pouvez en apprendre davantage à ce sujet à l'adresse http://api.jquery.com/nth. -last-child-selector /