Detaillierte Erläuterung der Verwendung der filter()-Methode zum Durchlaufen von DOM-Knoten

1. .filter(selector)

Diese Verwendung basiert auf dem angegebenen Selektorparameter (jquery selector Ausdruck im übereinstimmenden Element ). Filtern Sie, packen Sie dann die passenden Elemente in eine Sammlung von JQuery-Elementen und geben Sie sie zurück. Diese Methode wird verwendet, um den Übereinstimmungsbereich einzugrenzen. Der Selektorparameter kann aus mehreren durch Kommas verbundenen Ausdrücken bestehen. Sehen Sie sich das Beispiel an:

HTML-Code:

<ul>
  <li>11111</li>
  <li class="item">22222</li>
  <li>33333</li>
  <li>44444</li>
  <li>55555</li>
  <li>66666</li>
  <li>77777</li>
</ul>

JQuery-Code:

$("ul>li").filter(":even").css("color","red");
//将索引为偶数的li背景变为红色

Der obige JQuery-Code und der folgende JQuery-Code Wirkung Es ist das Gleiche

$("ul>li:even").css("color","red");
//将索引为偶数的li背景变为红色

Schauen wir uns die Verwendung von Selektorausdrücken an, die mit Kommas verbunden sind:

$("ul>li").filter(":even,.item").css("color","blue");
//将索引为偶数和calss为item的li背景变为蓝色

Das Demo-Beispiel sieht wie folgt aus:

<ul>
  <li>11111</li>
  <li class="item">22222</li>
  <li>33333</li>
  <li>44444</li>
  <li>55555</li>
  <li>66666</li>
  <li>77777</li>
</ul>


<script>
$(function(){
  $("#test1").click(function(){
    $("ul>li").filter(":even").css("color","red");//将索引为偶数的li背景变为红色
    //这个式子和 $("ul>li:even").css("color","red"); 等效
  });
  $("#test2").click(function(){
    $("ul>li").filter(":even,.item").css("color","blue");//将索引为偶数和calss为item的li背景变为蓝色
  });
});
</script>

2. .filter(function(index))

Diese Verwendungsmethode besteht darin, die übereinstimmenden Elemente zu durchlaufen. Wenn der von function(index) zurückgegebene Wert wahr ist, ist das Element wahr selected, wenn der Rückgabewert false ist, wird dieses Element nicht ausgewählt

Der Indexparameter ist der Index des aktuell übereinstimmenden Elements in der ursprünglichen Elementsammlung. Beispiel unten:

HTML-Code:

<p id="first"></p>
<p id="second"></p>
<p id="third"></p>
<p id="fourth"></p>
<p id="fifth"></p>
<p id="sixth"></p>

JQuery-Code:

$("p").filter(function(index) {
  return index == 1 || $(this).attr("id") == "fourth";
}).css("border", "5px double blue");

Das Ergebnis des obigen Codes ist das zweite p-Element Der Rand des p-Elements mit der ID „vierter“ wird zu einer Doppellinie und die Farbe ist blau

Das Demo-Beispiel sieht wie folgt aus:

<p id="first"></p>
<p id="second"></p>
<p id="third"></p>
<p id="fourth"></p>
<p id="fifth"></p>
<p id="sixth"></p>








<script>
$("#test").click(function(){
  $("p").filter(function(index) {
    return index == 1 || $(this).attr("id") == "fourth";
  }).css("border", "5px double blue");
});
</script>

3. . filter( element )

Elementparameter ist DOM-Objekt Wenn das Element-DOM-Objekt und das übereinstimmende Element dasselbe Element sind, wird dieses Element abgeglichen.

Sehen Sie sich das Beispiel an:

Schauen Sie sich immer noch den HTML-Code oben an und schauen Sie sich den JQuery-Code an:

$("p").filter(document.getElementById("third")).css("border", "5px double blue");

Das Ergebnis ist der Rand des p-Elements mit der ID dritte hat sich geändert.

$("#third").css("border", "5px double blue");

Das Demo-Beispiel lautet wie folgt:

<p id="first"></p>
<p id="second"></p>
<p id="third"></p>
<p id="fourth"></p>
<p id="fifth"></p>
<p id="sixth"></p>








<script>
$("#test").click(function(){
  $(&quot;p&quot;).filter(document.getElementById(&quot;third&quot;)).css(&quot;border&quot;, &quot;5px double blue&quot;);
});
</script>

4.filter(jQuery object)

Diese Verwendung Die Verwendung ist ähnlich wie bei .filter(element) oben, außer dass ein Parameter ein DOM-Objekt und ein Parameter ein JQuery-Objekt ist.

Sehen Sie sich das Beispiel an:

Sehen Sie sich ähnlich wie im obigen HTML-Code den JQuery-Code an:

$("p").filter($("#third")).css("border", "5px double blue");

Das Ergebnis ist, dass der Rand des p-Elements mit Das ID-Drittel hat sich geändert.
Es wäre besser, den folgenden JQuery-Code direkt zu verwenden:

$("#third").css("border", "5px double blue");

Das Demo-Beispiel sieht wie folgt aus:

<p id="first"></p>
<p id="second"></p>
<p id="third"></p>
<p id="fourth"></p>
<p id="fifth"></p>
<p id="sixth"></p>








<script>
$("#test").click(function(){
  $(&quot;p&quot;).filter($(&quot;#third&quot;)).css(&quot;border&quot;, &quot;5px double blue&quot;);
});
</script>

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung der filter()-Methode zum Durchlaufen von DOM-Knoten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!