jQuery-besøg - filter() metoden
Eksempel
Ændre farven på alle "div"-elementer, og tilføj kantlinje til klassen "middle":
$("div").css("background", "#c8ebcc")
.filter(".middle")
.css("border-color", "red");
Definition og brug
filter() metoden reducerer matchende elementersamling til elementer, der matcher den angivne selektor.
Syntaks
.filter(selector)
| Parameter | Beskrivelse |
|---|---|
| selector | Strengværdi, der indeholder udtrykket, der bruges til at matche den aktuelle samling af elementer. |
Detaljeret forklaring
Hvis der gives et jQuery-objekt, der repræsenterer en samling af DOM-elementer, bruger .filter() metoden til at konstruere en ny jQuery-samling af underelementer, der matcher valget. Valget tester hver element; alle elementer, der matcher valget, inkluderes i resultatet.
Tænk over denne side med en simpel liste:
<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>
vi kan anvende denne metode til denne samling af listeemner:
$('li').filter(':even').css('background-color', 'red');
Resultatet af denne kald er at sætte baggrundsfarven for elementerne 1, 3, 5 til rød, fordi de alle matcher valoren (husk, :even og :odd bruger en 0-baseret index).
Brug af filtreringsfunktion
Den anden form af denne metode bruger en funktion i stedet for en selektor til at filtrere elementer. For hver element, hvis funktionen returnerer true, inkluderes elementet i den allerede filtrerede samling; ellers udelukkes det.
Se nedenfor dette lidt komplekse HTML-fragment:
<ul> <li><strong>list</strong> item 1 - one strong tag</li> <li><strong>list</strong> item <strong>2</strong> - to <span>strong tags</span></li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> <li>list item 6</li> </ul>
vi kan vælge disse listeemner og derefter filtrere dem baseret på deres indhold:
$('li').filter(function(index) {
return $('strong', this).length == 1;
).css('background-color', 'red');
