Detaillierte Erläuterung der filter()-Methode von jQuery zum Durchlaufen des DOM-Knotens operation_jquery

In diesem Artikel wird anhand eines Beispiels die filter()-Methode von jQuery zum Durchlaufen von DOM-Knoten analysiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

.filter(selector)

Diese Methode wird zum Filtern nach Selektorausdruck in übereinstimmenden Elementen verwendet.
Denken Sie daran: Sie müssen den Selektor-Ausdrucksparameter übergeben, wenn Sie diese Methode verwenden, andernfalls wird der Fehler „‚nodeType‘ ist leer oder kein Objekt“ gemeldet

Bitte beachten Sie auch den Unterschied zwischen dieser Filtermethode und der Suchmethode in jquery:
Die Filtermethode filtert übereinstimmende Elemente, während die Suchmethode abgeleitete Elemente übereinstimmender Elemente filtert.

Ab Jquery-Version 1.4 wurden der Filtermethode zwei neue Verwendungen hinzugefügt, und jetzt gibt es insgesamt vier Verwendungen.

Sehen wir uns diese vier Verwendungen im Detail an:

1. .filter(selektor)

Diese Verwendung besteht darin, die übereinstimmenden Elemente gemäß dem angegebenen Selektorparameter (JQuery-Selektorausdruck) zu filtern, die übereinstimmenden Elemente dann in eine JQuery-Elementsammlung zu packen und zurückzugeben. Diese Methode wird verwendet, um den Übereinstimmungsbereich einzugrenzen. Der Selektorparameter kann aus mehreren durch Kommas verbundenen Ausdrücken bestehen.

Sehen Sie sich ein 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 hat die gleiche Wirkung wie der folgende JQuery-Code

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

Sehen 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>
<input type="button" id="test1" value="获取索引为偶数的li">
<input type="button" id="test2" value="获取索引为偶数和calss为item的li">
<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( Funktion(Index) )

Diese Verwendungsmethode besteht darin, die übereinstimmenden Elemente zu durchlaufen. Wenn der von der Funktion (Index) zurückgegebene Wert wahr ist, wird das Element ausgewählt. Wenn der Rückgabewert falsch ist, wird das Element nicht ausgewählt

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

Wenn Ihnen die obige Erklärung nicht klar ist (meine Ausdrucksfähigkeiten sind etwas mangelhaft~^_^), können Sie sich das folgende Beispiel genau ansehen:

HTML-Code:

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

JQuery-Code:

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

Das Ergebnis des obigen Codes ist, dass die Ränder des zweiten div-Elements und des div-Elements mit der ID „vierter“ eine doppelte Linienfarbe von Blau annehmen

Das Demo-Beispiel sieht wie folgt aus:

<style>
 div{ width:60px; height:60px; margin:5px; float:left;border:3px white solid;background:#ff0000 }
</style>
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
<div id="fourth"></div>
<div id="fifth"></div>
<div id="sixth"></div>
<br><br><br><br><br><br>
<input type="button" id="test" value="点击我看看上面的div的变化">
<script>
$("#test").click(function(){
  $("div").filter(function(index) {
    return index == 1 || $(this).attr("id") == "fourth";
  }).css("border", "5px double blue");
});
</script>

3. .filter( element )

Der Elementparameter ist ein DOM-Objekt. Wenn das Element-DOM-Objekt und das übereinstimmende Element dasselbe Element sind, wird dieses Element abgeglichen. Diese Verwendung wurde in Version 1.4 neu hinzugefügt. Ich habe noch nicht herausgefunden, wozu sie dient

Sehen Sie sich das Beispiel an:

Schauen Sie sich immer noch den obigen HTML-Code an und sehen Sie sich den JQuery-Code an:

Code kopieren Der Code lautet wie folgt:

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

Das Ergebnis ist, dass sich der Rand des div-Elements mit der ID Third geändert hat.

Dieses Beispiel ist sehr nutzlos. Die Leute werden sagen, warum sich die Mühe machen? Besser direkt gehen:

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

Das denke ich zwar auch, aber da es in Version 1.4 neu hinzugefügt wurde, wird es definitiv nützlich sein und nicht nutzlos sein. Es ist nur so, dass mein JQuery-Level noch zu niedrig ist und ich es noch nicht entdeckt habe. Wenn jemand eine Idee für eine Verwendung hat, hoffe ich, dass Sie mich aufklären können!

Das Demo-Beispiel sieht wie folgt aus:

<style>
 div{ width:60px; height:60px; margin:5px; float:left;border:3px white solid;background:#ff0000 }
</style>
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
<div id="fourth"></div>
<div id="fifth"></div>
<div id="sixth"></div>
<br><br><br><br><br><br>
<input type="button" id="test" value="点击我看看上面的div的变化">
<script>
$("#test").click(function(){
  $("div").filter(document.getElementById("third")).css("border", "5px double blue");
});
</script>

4. .filter(jQuery-Objekt)

Diese Verwendung ähnelt der Verwendung von .filter(element) oben, außer dass ein Parameter ein DOM-Objekt und der andere Parameter ein JQuery-Objekt ist. Ich halte es immer noch für etwas nutzlos.

Siehe Beispiel:

Für denselben HTML-Code oben sehen Sie sich den JQuery-Code an:

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

Das Ergebnis ist, dass sich der Rand des div-Elements mit der ID Third geändert hat.

Es wäre besser, den folgenden JQuery-Code direkt zu verwenden:

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

Das Demo-Beispiel sieht wie folgt aus:

<style>
 div{ width:60px; height:60px; margin:5px; float:left;border:3px white solid;background:#ff0000 }
</style>
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
<div id="fourth"></div>
<div id="fifth"></div>
<div id="sixth"></div>
<br><br><br><br><br><br>
<input type="button" id="test" value="点击我看看上面的div的变化">
<script>
$("#test").click(function(){
  $("div").filter($("#third")).css("border", "5px double blue");
});
</script>

Leser, die an weiteren jQuery-bezogenen Inhalten interessiert sind, können sich die speziellen Themen auf dieser Website ansehen: „

JQuery-Traversalalgorithmus und Zusammenfassung der Fähigkeiten“, „Zusammenfassung der jQuery-Tabellenoperationsfähigkeiten.“ ", "Zusammenfassung der jQuery-Drag-Effekte und -Techniken", "Zusammenfassung der jQuery-Erweiterungstechniken", "Zusammenfassung der gängigen klassischen jQuery-Spezialeffekte" , „Zusammenfassung der Verwendung von jQuery-Animationen und Spezialeffekten“, „Zusammenfassung der Verwendung von jQuery-Selektoren“ und „Zusammenfassung allgemeiner jQuery-Plugins und Verwendung“

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die sich mit der jQuery-Programmierung befassen.