jQuery esplora - metodo children()
Esempio
Trovare tutti i figli degli elementi div con la classe "selected" e impostare il loro colore su blu:
$("div").children(".selected").css("color", "blue");
Definizione e uso
Il metodo children() restituisce tutti i figli diretti dell'elemento selezionato.
Sintassi
.children(selector)
| Parametro | Descrizione |
|---|---|
| selector | Valore di stringa, che contiene l'espressione di selettore per gli elementi corrispondenti. |
Descrizione dettagliata
Se viene fornito un oggetto jQuery che rappresenta un insieme di elementi DOM, il metodo .children() ci permette di recuperare questi elementi nel albero del DOM e di costruire un nuovo oggetto jQuery con gli elementi corrispondenti..find() Simile al metodo .children(), ma quest'ultimo esplora solo un singolo livello del DOM.
Nota che, come la maggior parte dei metodi jQuery, .children() non restituisce nodi di testo; se hai bisogno di ottenere tutti i nodi figli inclusi i nodi di testo e i commenti, usa .contents().
Questo metodo accetta un'espressione di selettore come parametro opzionale, dello stesso tipo di quelli passati a $(). Se applichiamo il selettore, testiamo se l'elemento corrisponde all'espressione per filtrare questi elementi.
Pensa a questa pagina con una lista annidata di base:
<ul class="level-1">
<li class="item-i">I</li>
<li class="item-ii">II
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>
Se partiamo dalla lista level-2, possiamo trovare i suoi sottoelementi:
$('ul.level-2').children().css('background-color', 'red');
Il risultato di questa riga di codice è che i progetti A, B, C ricevono uno sfondo rosso. Poiché non abbiamo applicato un'espressione di selettore, l'oggetto jQuery restituito contiene tutti i sottoelementi. Se applichiamo un selettore, includerà solo i progetti che corrispondono.
