Selezionare l'ennesimo fratello precedente in jQuery?
-
06-07-2019 - |
Domanda
Sto cercando di impostare il mio selettore jQuery ma non sono esattamente sicuro di come devo scriverlo.
Ho un elenco non ordinato che assomiglia a questo:
<ul>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li class="last">something</li>
</ul>
Ora so che se voglio selezionare l'ultimo figlio posso farlo usando "ul li.last" o "ul.li:last" ma dico se voglio il penultimo, o il terzo, o il ventesimo?Adesso lo farei?
Soluzione
Usate eq
:
$('ul li').eq(X);
Dove X è un indice in base 0 dell'elemento desiderato.Potresti anche usare il modulo di selezione:
$('ul li:eq(X)');
E potresti anche ottenere un risultato simile utilizzando nth-child
:
$('ul li:nth-child(X)');
La documentazione ha questo da dire sulla differenza tra nth-child
E eq
:
Mentre :eq(index) corrisponde solo a un singolo elemento, questo corrisponde a più di uno:Uno per ogni genitore con indice.Multiplo per ciascun genitore con pari, dispari o equazione.L'indice specificato ha un indice, a differenza di :eq() che inizia da zero.
Quindi facendo $('ul li').eq(19);
otterresti il singolo 20esimo elemento corrispondente della query (quindi se c'è più di una lista nel documento questo non ti darà "tutti i 19esimi figli", mentre $('ul li:nth-child(20)');
ti otterrebbe il ventesimo elemento dell'elenco corrispondente di ciascuno <ul>
nel documento.
MODIFICARE:
Per fare qualcosa come "penultimo", il modo sensato per farlo sarebbe come:
var $ul = $('#mylist > li');
var $el = $ul.eq($ul.length-2);
Ma probabilmente dovresti fare un controllo per assicurarti che length-2 non sia inferiore a 0.
Altri suggerimenti
Vuoi il terzo dall'ultimo?
var $ul = $("ul li");
$ul.find(":eq(" + Math.max(0, $ul.length - 3) + ")");
Spiegazione rapida: la lunghezza di $ ul (che è un oggetto jQuery) è il numero di li trovati. Quindi puoi usarlo insieme a & Quot;: eq (n) & Quot; selettore per ottenere il li nell'indice desiderato.
Ho usato Math.max nel caso in cui l'elenco fosse troppo breve (meno di 3 li).
Funzionerà anche questo, ma ovviamente non è il modo migliore:
var $ul = $("ul li:last").prev().prev();
Per il terzo e il ventesimo, puoi fare ul li: eq (3)
e ul li: eq (20)
. Dal penultimo, potresti essere in grado di fare qualcosa con nth-child
" equation
opzione argomento, anche se non sono sicuro.
alert($('ul li').eq(3).text());
Ciò avviserà il testo del terzo elemento dell'elenco.
Il team di jQuery ha aggiunto questa funzione nella versione 1.9
Puoi leggerlo a http://api.jquery.com/nth -last-figlio-selettore /