Explication détaillée de la méthode filter() de jQuery traversant le nœud DOM operations_jquery

Cet article analyse la méthode filter() de jQuery traversant les nœuds DOM à travers un exemple. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

.filter(sélecteur)

Cette méthode est utilisée pour filtrer par expression de sélecteur dans les éléments correspondants.
N'oubliez pas : lorsque vous utilisez cette méthode, vous devez passer le paramètre d'expression du sélecteur, sinon une erreur "'nodeType' est vide ou n'est pas un objet" sera signalée

Veuillez également noter la différence entre cette méthode de filtrage et la méthode find dans jquery :
La méthode filter filtre les éléments correspondants, tandis que la méthode find filtre les éléments descendants des éléments correspondants.

À partir de la version 1.4 de jquery, deux nouvelles utilisations ont été ajoutées à la méthode de filtrage, et il y a désormais quatre utilisations au total.

Regardons ces quatre usages en détail :

1.filter(sélecteur)

Cette utilisation consiste à filtrer les éléments correspondants en fonction du paramètre de sélecteur donné (expression de sélecteur jquery), puis à regrouper les éléments correspondants dans une collection d'éléments jquery et à la 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 un 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 a le même effet que le code jquery suivant

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

Regardons l'utilisation des expressions de sélection liées aux 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>
<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( fonction(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 sera sélectionné. Si la valeur de retour est fausse, alors l'é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.

Si vous n'êtes pas clair sur l'explication ci-dessus (mes compétences d'expression font un peu défaut~^_^), vous pouvez bien regarder l'exemple suivant :

Code HTML :

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

code jquery :

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

Le résultat du code ci-dessus est que les bordures du deuxième élément div et de l'élément div avec l'identifiant "quatrième" deviennent une double ligne de couleur bleue

L'exemple de démonstration est le suivant :

<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(élément)

Le paramètre element est un 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. Cette utilisation est nouvellement ajoutée dans la version 1.4, je n'ai pas encore compris quelle est son utilisation

Regardez l'exemple :

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

Copier le code Le code est le suivant :

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

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

Cet exemple est très inutile. Les gens diront pourquoi s'embêter ? Il vaut mieux y aller directement :

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

En effet, je le pense aussi, mais comme il est nouvellement ajouté dans la version 1.4, il sera certainement utile et ne sera pas inutile. C'est juste que mon niveau jquery est encore trop bas et je ne l'ai pas encore découvert. Si un lecteur a une idée d'une utilisation, j'espère qu'il pourra m'éclairer !

L'exemple de démonstration est le suivant :

<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 (objet jQuery)

Cette utilisation est similaire à l'utilisation de .filter(element) ci-dessus, sauf qu'un paramètre est un objet DOM et l'autre paramètre est un objet jquery. Je pense toujours que c'est un peu inutile.

Voir exemple :

Pour le même code HTML ci-dessus, regardez le code jquery :

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

Le résultat est que la bordure de l'élément div avec l'identifiant tiers 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 :

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

Les lecteurs intéressés par davantage de contenu lié à jQuery peuvent consulter les sujets spéciaux sur ce site : "Algorithme de traversée JQuery et résumé des compétences", "Résumé des compétences d'opération de table jQuery (table) " , "Résumé des effets et techniques de glisser jQuery", "Résumé des techniques d'extension jQuery", "Résumé des effets spéciaux classiques courants jQuery" , "Résumé de l'utilisation des animations et des effets spéciaux jQuery", "Résumé de l'utilisation du sélecteur jquery" et "Plug-ins communs jQuery et résumé de l'utilisation"

J'espère que cet article sera utile à tous ceux qui programment jQuery.