Maison > interface Web > js tutoriel > Explication détaillée des exemples de recherche et de filtrage jQuery

Explication détaillée des exemples de recherche et de filtrage jQuery

小云云
Libérer: 2018-01-06 09:05:32
original
1332 Les gens l'ont consulté

Habituellement, le sélecteur peut localiser directement l'élément souhaité, mais lorsque nous obtenons un objet jQuery, nous pouvons également utiliser cet objet comme base pour rechercher et filtrer. Cet article présente principalement en détail les informations pertinentes sur la recherche et le filtrage jQuery. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.

La recherche la plus courante consiste à effectuer une recherche parmi tous les nœuds enfants d'un nœud, en utilisant la méthode find(), qui elle-même reçoit un sélecteur arbitraire. Par exemple, la structure HTML suivante :


<!-- HTML结构 -->
<ul class="lang">
 <li class="js dy">JavaScript</li>
 <li class="dy">Python</li>
 <li id="swift">Swift</li>
 <li class="dy">Scheme</li>
 <li name="haskell">Haskell</li>
</ul>
Copier après la connexion

Utilisez find() pour rechercher :


var ul = $(&#39;ul.lang&#39;); // 获得<ul>
var dy = ul.find(&#39;.dy&#39;); // 获得JavaScript, Python, Scheme
var swf = ul.find(&#39;#swift&#39;); // 获得Swift
var hsk = ul.find(&#39;[name=haskell]&#39;); // 获得Haskell
Copier après la connexion

Si vous souhaitez effectuer une recherche vers le haut à partir du nœud actuel, utilisez la méthode parent() :


var swf = $(&#39;#swift&#39;); // 获得Swift
var parent = swf.parent(); // 获得Swift的上层节点<ul>
var a = swf.parent(&#39;p.red&#39;); // 从Swift的父节点开始向上查找,直到找到某个符合条件的节点并返回
Copier après la connexion

Pour les nœuds du même niveau, vous pouvez utiliser next() et prev()Méthode, par exemple :
Après avoir obtenu le nœud Swift :


var swift = $(&#39;#swift&#39;);

swift.next(); // Scheme
swift.next(&#39;[name=haskell]&#39;); // Haskell,因为Haskell是后续第一个符合选择器条件的节点

swift.prev(); // Python
swift.prev(&#39;.js&#39;); // JavaScript,因为JavaScript是往前第一个符合选择器条件的节点
Copier après la connexion

Le filtrage

est similaire à la cartographie et au filtre dans la programmation fonctionnelle, et les objets jQuery ont également des méthodes similaires. La méthode
filter() peut filtrer les nœuds qui ne remplissent pas les conditions du sélecteur :


var langs = $(&#39;ul.lang li&#39;); // 拿到JavaScript, Python, Swift, Scheme和Haskell
var a = langs.filter(&#39;.dy&#39;); // 拿到JavaScript, Python, Scheme
Copier après la connexion

Ou transmettez une fonction, faites particulièrement attention au fait que ce à l'intérieur de la fonction est lié en tant qu'objet DOM, pas en tant qu'objet jQuery :

La méthode


var langs = $(&#39;ul.lang li&#39;); // 拿到JavaScript, Python, Swift, Scheme和Haskell
langs.filter(function () {
 return this.innerHTML.indexOf(&#39;S&#39;) === 0; // 返回S开头的节点
}); // 拿到Swift, Scheme
Copier après la connexion

map() convertit plusieurs nœuds DOM contenus dans un objet jQuery en d'autres objets :


var langs = $(&#39;ul.lang li&#39;); // 拿到JavaScript, Python, Swift, Scheme和Haskell
var arr = langs.map(function () {
 return this.innerHTML;
}).get(); // 用get()拿到包含string的Array:[&#39;JavaScript&#39;, &#39;Python&#39;, &#39;Swift&#39;, &#39;Scheme&#39;, &#39;Haskell&#39;]
Copier après la connexion

De plus, si un objet jQuery contient plus d'un nœud DOM, first(), last() et < La méthode 🎜>slice() peut renvoyer un nouvel objet jQuery et supprimer les nœuds DOM inutiles :


var langs = $(&#39;ul.lang li&#39;); // 拿到JavaScript, Python, Swift, Scheme和Haskell
var js = langs.first(); // JavaScript,相当于$(&#39;ul.lang li:first-child&#39;)
var haskell = langs.last(); // Haskell, 相当于$(&#39;ul.lang li:last-child&#39;)
var sub = langs.slice(2, 4); // Swift, Scheme, 参数和数组的slice()方法一致
Copier après la connexion
Recommandations associées :


Explication détaillée de la méthode PHP pour trouver différents éléments dans deux tableaux

Méthode PHP pour trouver des valeurs spécifiées dans des tableaux multidimensionnels

Méthode binaire PHP pour implémenter le tutoriel de la fonction de recherche de tableau

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal