Explication détaillée de l'utilisation de la méthode de filtre jQuery filter()-js tutoriel-php.cn

Explication détaillée de l'utilisation de la méthode de filtre jQuery filter()

php中世界最好的语言

Libérer： 2018-04-24 11:52:18

original

3456 Les gens l'ont consulté

Cette fois, je vais vous apporter une explication détaillée de l'utilisation de la méthode de filtrage jQuery filter(). Quelles sont les précautions lors de l'utilisation de la méthode de filtrage jQuery filter(). Ce qui suit est un cas pratique. , jetons un coup d'oeil.

Il est désormais nécessaire de sélectionner tous les éléments avec des images d'arrière-plan.

Ce problème est un peu délicat. Nous ne pouvons pas utiliser d'expressions de sélection pour résoudre ce problème. filter() peut sélectionner des éléments en fonction de toutes les conditions exprimées dans la fonction.
La méthode filter dans jQuery permet de passer une chaîne (c'est-à-dire une expression de sélecteur) en tant que paramètre
Ou pass est une fonction. value définira si un élément est sélectionné.
La fonction passée sera exécutée sur chaque élément de l'ensemble de sélection actuel
Lorsque la fonction renvoie false, la fonction correspondante est supprimée collectivement. est vrai, l'élément correspondant
n'est pas affecté

jQuery(&#39;*&#39;).filter(function(){ 
return !!jQuery(this).css(&#39;
background
&#39;); 
});

Copier après la connexion

Le code ci-dessus sélectionne tous les éléments avec des images d'arrière-plan

L'ensemble initial est entièrement Element (*). avec une fonction en paramètre.
Cette fonction détermine s'il y a un attribut background sur chaque collection
S'il y en a, il est conservé Sinon, il est dans le jeu de résultats Supprimez cet élément. Ce que vous voyez !! est n'importe quel type vide et indéfini, et bien sûr false au milieu de
javascript
Si l'appel de fonction renvoie ces valeurs, alors la fonction renvoie false , supprimant ainsi . éléments sans attribut d'arrière-plan dans la collection.
En fait, !! n'est pas nécessaire car jQuery convertira ces valeurs de retour en types booléens. Mais c'est toujours une bonne idée de conserver
De cette façon. , quand quelqu'un voit votre code, il peut être absolument sûr de votre intention. (Cela facilite la lisibilité du code
Dans la fonction passant filter(), vous pouvez transmettre la clé this Le mot fait référence à l'élément actuel). .
Incluez-le dans la fonction jQuery et il devient un objet jQuery
this //Objet élément régulier
jQuery(this)
Voici quelques exemples pour stimuler votre imagination. .

jQuery(&#39;p&#39;).filter(function(){ 
var width = jQuery(this).width; 
return width >100 && widht < 200; 
}); 
//返回子元素有10个或者20个的元素. 
jQuery(&#39;*&#39;).filter(function(){ 
var children = jQuery(this).childern().length; 
return children ===10 || children ===20; 
});

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

<html> 
<head> 
<title></title> 
<style type="text/css"> 
.c1{ 
background-color
: yellow; 
} 
.c2{ 
background-color: green; 
} 
p{ 
background-color: pink; 
} 
h3{ 
background-color: gray; 
} 
</style> 
</head> 
<body> 
<p class="c1">Bye Bye Beautiful</p> 
<p class="c2">Nothing but the girl</p> 
<p>The Lazy song</p> 
<h2>If I die young</h2> 
<h3>New soul</h3> 
<script type="text/javascript" src="jquery.2.0.3.js"></script> 
<script type="text/javascript"> 
jQuery(document).ready(function($) { 
var ret = $(&#39;*&#39;).filter(function(index) { 
return !$(this).css(&#39;background-color&#39;); 
}); 
$.each(ret, function(index, val) { 
$(val).css(&#39;background-color&#39;,&#39;black&#39;); 
}); 
}); 
</script> 
</body> 
</html>

Copier après la connexion

Lecture recommandée :

Comment appliquer les tables de données du plug-in jQuery pour la manipulation de tables

Explication détaillée de l'analyse js/jquery de json méthode

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!