jQuery-läpikäynti - children()-metodi
Esimerkki
Löydä kaikki "selected"-nimiset div-elementtien lapsielementit ja aseta ne siniseksi:
$("div").children(".selected").css("color", "blue");
Määritelmä ja käyttö
children()-menetelmä palauttaa valittujen elementtien kaikki suorat alkielementit.
Syntaksi
.children(selector)
| Parametri | Kuvaus |
|---|---|
| selector | Merkkijonoarvo, joka sisältää vastaavien elementtien valitsinlausekkeen. |
Yksityiskohtainen selitys
Jos annetaan jQuery-objekti, joka edustaa DOM-elementtikokoelmaa, .children()-menetelmä mahdollistaa näiden elementtien hakemisen DOM-puusta ja rakentaa uuden jQuery-objektin vastaavista elementeistä..find() Samoin kuin .children()-menetelmä, mutta jälkimmäinen tutkii vain DOM-puun yhtä tasoista.
Huomaa, että .children() ei palauta tekstityyppejä; jos haluat saada kaikki alkielementit, mukaan lukien tekstit ja kommentit, käytä .contents().
Tämä menetelmä hyväksyy valitsinlausekkeen valinnaisena parametrina, joka on samaa tyyppiä kuin parametri, jonka annamme $(). Jos käytämme valitsinlauseketta, testataan elementin vastaavuus lausekkeeseen, jotta nämä elementit voidaan suodattaa.
Mieti tätä perustallennettua sisennettyä luetteloa sisältävää sivua:
<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>
Jos aloitamme level-2-listasta, voimme löytää sen alkielementit:
$('ul.level-2').children().css('background-color', 'red');
Tämä koodin tuloksena projektit A, B, C saavat punaisen taustan. Koska emme ole käyttäneet valitsinlausekkeita, palautettu jQuery-objekti sisältää kaikki alkielementit. Jos käytämme valitsinlauseketta, vain vastaavat projektit sisältyvät.
