jQuery-sökning - filter() metod
Exempel
Ändra färgen på alla "div"-element, och lägg till kantlinje till klassen "middle":
$("div").css("background", "#c8ebcc")
.filter(".middle")
.css("border-color", "red");
Definition och användning
filter() metoden reducerar en matchande elementkollektion till element som matchar den specificerade väljaren.
Syntax
.filter(selector)
| Parameter | Beskrivning |
|---|---|
| selector | Strängvärde, innehållande uttryck för väljare som används för att matcha den aktuella elementkollektionen. |
Detaljerad förklaring
Om en jQuery-objekt som representerar en samling DOM-element ges, kommer .filter() metoden att skapa en ny jQuery-objekt som består av en del av de matchande elementen. Väljaren kommer att testas mot varje element; alla element som matchar väljaren kommer att inkluderas i resultatet.
Tänk på denna sida med en enkel lista:
<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 tillämpa denna metod på denna samling av listobjekt:
$('li').filter(':even').css('background-color', 'red');
Resultatet av denna anrop är att sätta bakgrundsfärgen för objekt 1, 3, 5 till röd, eftersom de alla matchar väljaren (kom ihåg att :even och :odd använder en index baserad på 0).
Använd filtreringsfunktion
Den andra formen av denna metod är att filtrera element genom en funktion snarare än genom en väljare. För varje element, om funktionen returnerar true, inkluderas elementet i den redan filtrerade samlingen; annars utesluts det.
Se nedan detta något mer komplexa HTML-fragment:
<ul> <li><strong>list</strong> item 1 - one strong tag</li> <li><strong>list</strong> item <strong>2</strong> - two <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älja dessa listobjekt och sedan filtrera dem baserat på deras innehåll:
$('li').filter(function(index) {
return $('strong', this).length == 1;
).css('background-color', 'red');
