jQuery-selailu - filter()-metodi
Esimerkki
Muuta kaikki div-tyyppisten elementtien väri ja lisää reunaviiva luokalle "middle":
$("div").css("background", "#c8ebcc")
.filter(".middle")
.css("border-color", "red");
Määritelmä ja käyttö
.filter()-menetelmä supistaa vastaavan elementtijoukon valitsimen mukaisiin elementteihin.
syntaksi
.filter(selector)
| parametrit | kuvaus |
|---|---|
| selector | Merkistöarvo, joka sisältää valitsimen ilmauksen, jota käytetään nykyisen elementtijoukon sopivuuden määrittämiseen. |
Yksityiskohtainen selitys
Jos annetaan jQuery-objekti, joka edustaa DOM-elementtien joukkoa, .filter()-menetelmä luo uuden jQuery-objektin, joka koostuu vastaavista elementtien alajoukosta. Käytettävä valitsin testaa jokaista elementtiä; kaikki valitsimen mukaiset elementit sisältyvät tulokseen.
mieti seuraavaa yksinkertaista luetteloa sisältävää sivua:
<ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> <li>list item 6</li> </ul>
voimme soveltaa tätä menetelmää tähän luetteloaskeleiden joukkoon:
$('li').filter(':even').css('background-color', 'red');
Tämän kutsun tuloksena asetetaan projektien 1, 3 ja 5 taustaväri punaiseksi, koska ne vastaavat valitsinta (muista, että :even ja :odd käyttävät 0-alustettua index).
Suodatusfunktio
Toinen menetelmän muoto on käyttää funktiota eikä valitsinta elementtien suodattamiseen. Jos funktio palauttaa true, elementti sisältyy suodatettuun joukkoon; muuten sitä jätetään pois.
katso seuraava hieman monimutkaisempi HTML-kappale:
<ul> <li><strong>list</strong> item 1 - yksi bold tag</li> <li><strong>list</strong> item <strong>2</strong> - kaksi <span>bold tags</span></li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> <li>list item 6</li> </ul>
voimme valita nämä luetteloaskeleet ja sitten suodattaa ne sisällön perusteella:
$('li').filter(function(index) {
return $('strong', this).length == 1;
).css('background-color', 'red');
