jQuery-laskenta - parents()-menetelmä
Määrittely ja käyttö
parents() hakee kaikki elementin isovanhemmat, valitsin on valinnainen.
.parents()selector)
| Parametri | Kuvaus |
|---|---|
| selector | Merkkijonoarvo, joka sisältää valitsinlausekkeen elementtien vastaamiseksi. |
Yksityiskohtainen selitys
Jos annetaan jQuery-objekti, joka edustaa DOM-elementtien joukkoa, .parents()-menetelmä mahdollistaa näiden elementtien isovanhempien etsimisen DOM-puusta ja luo uuden jQuery-objektin, joka sisältää vastaa elementtejä järjestyksessä lähimmäisestä isäntäelementistä ylöspäin. Elementit palautetaan järjestyksessä lähimmäisestä isäntäelementistä ulospäin. .parents() ja .parent() Menetelmä on samanlainen, mutta jälkimmäinen kiertää DOM-puun vain yhdellä tasolla.
Tämä menetelmä hyväksyy valinnainen valitsinlauseke, joka on samanlaista kuin parametrit, jotka välitetään $()-funktioon. Jos valitsinlauseketta sovelletaan, elementtejä suodellaan tarkistamalla, vastaavatko ne valitsinlauseketta.
Harkitse tätä perusnäkymää sisältävää upotettua listaa:
<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 kohteesta A, voimme löytää sen isovanhemmat:
$('li.item-a').parents().css('background-color', 'red');
Tämän kutsun tuloksena level-2-lista, kohta II sekä level-1-lista ja muut elementit (DOM-puun pituudelta aina <html>-elementtiin asti) asettavat punaisen taustavärin. Koska emme ole soveltaneet valitsinlauseketta, isäntäelementti on luonnollisesti osa objektia. Jos valitsinlauseketta on sovellettu, elementti tarkistetaan ennen kuin se sisällytetään. Koska emme ole soveltaneet valitsinlauseketta, kaikki isovanhemmat ovat osa palautettua jQuery-objektia. Jos valitsinlauseketta on sovellettu, sisällytetään vain niitä, jotka vastaa valitsinlauseketta.
