Explication détaillée de l'utilisation de la méthode filter() pour parcourir les nœuds DOM

1. .filter(selector)

Cette utilisation est basée sur le paramètre de sélecteur donné (sélecteur jquery expression dans l'élément correspondant ) pour filtrer, puis regrouper les éléments correspondants dans une collection d'éléments jquery et les renvoyer. Cette méthode est utilisée pour restreindre la portée de correspondance. Le paramètre sélecteur peut être constitué de plusieurs expressions connectées par des virgules. Regardez l'exemple :

Code HTML :

<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>

Code Jquery :

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

Le code jquery ci-dessus et le code jquery suivant effet C'est pareil

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

Regardons l'utilisation des expressions de sélection liées par des virgules :

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

L'exemple de démonstration est le suivant :

<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))

Cette méthode d'utilisation consiste à parcourir les éléments correspondants. Si la valeur renvoyée par function(index) est vraie, alors l'élément le sera. selected. , si la valeur de retour est fausse, alors cet élément ne sera pas sélectionné

Le paramètre index est l'index de l'élément correspondant actuel dans la collection d'éléments d'origine. Exemple ci-dessous :

Code HTML :

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

Code jquery :

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

Le résultat du code ci-dessus est le deuxième élément p La bordure de l'élément p avec l'identifiant "quatrième" devient une double ligne et la couleur est bleue

L'exemple de démonstration est le suivant :

<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 )

le paramètre d'élément est Objet DOM Si l'objet DOM de l'élément et l'élément correspondant sont le même élément, alors cet élément sera mis en correspondance.

Regardez l'exemple :

Toujours en regardant le code HTML ci-dessus, regardez le code jquery :

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

Le résultat est que la bordure de l'élément p avec l'identifiant tiers a changé.

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

L'exemple de démonstration est le suivant :

<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)

. Cette utilisation L'utilisation est similaire à .filter(element) ci-dessus, sauf qu'un paramètre est un objet DOM et l'autre paramètre est un objet jquery.

Regardez l'exemple :

De manière similaire au code HTML ci-dessus, regardez le code jquery :

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

Le résultat est que la bordure de l'élément p avec le tiers d'identification a changé.
Il serait préférable d'utiliser directement le code jquery suivant :

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

L'exemple de démonstration est le suivant :

<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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!