jQuery-Abfrage - filter() Methode
Beispiel
Ändert die Farbe aller "div"-Elemente und fügt der Klasse "middle" einen Rahmen hinzu:
$("div").css("background", "#c8ebcc")
.filter(".middle")
.css("border-color", "red");
Definition und Verwendung
Die filter() -Methode reduziert die Sammlung der übereinstimmenden Elemente auf die Elemente, die dem angegebenen Selector entsprechen.
Syntax
.filter(selector)
| Parameter | Beschreibung |
|---|---|
| selector | Zeichenkette, die den Selector-Ausdruck enthält, der zur Übereinstimmung mit der aktuellen Element集合. |
Detaillierte Erklärung
Wenn ein jQuery-Objekt gegeben ist, das eine Sammlung von DOM-Elementen darstellt, erstellt die .filter() -Methode einen neuen jQuery-Objekt, der aus dem Unter집 der Elemente besteht, die dem Selector entsprechen. Der Selector testet jeden Element; alle Elemente, die dem Selector entsprechen, werden im Ergebnis enthalten sein.
Denken Sie an diese Seite mit einer einfachen 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>
Wir können diese Methode auf diese Liste anwenden:
$('li').filter(':even').css('background-color', 'red');
Das Ergebnis dieser Anfrage ist, dass die Hintergrundfarbe der Elemente 1, 3 und 5 auf rot gesetzt wird, weil sie alle dem Selector entsprechen (denken Sie daran, dass :even und :odd auf einen index basieren, der ab 0 beginnt).
使用过滤函数
Die zweite Form dieser Methode筛选元素是通过函数而不是选择器。对于每个元素，如果该函数返回 true，则元素会被包含在已筛选集合中；否则，会排除这个元素。
Sehen Sie sich diesen etwas komplexeren HTML-Abschnitt an:
<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>
Wir können diese Liste auswählen und sie basierend auf ihrem Inhalt filtern:
$('li').filter(function(index) {
return $('strong', this).length == 1;
).css('background-color', 'red');
