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

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>

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

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

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

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 = $('#swift');

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

swift.prev(); // Python
swift.prev('.js'); // JavaScript，因为JavaScript是往前第一个符合选择器条件的节点

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 = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
var a = langs.filter('.dy'); // 拿到JavaScript, Python, Scheme

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 = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
langs.filter(function () {
 return this.innerHTML.indexOf('S') === 0; // 返回S开头的节点
}); // 拿到Swift, Scheme

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

var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
var arr = langs.map(function () {
 return this.innerHTML;
}).get(); // 用get()拿到包含string的Array：['JavaScript', 'Python', 'Swift', 'Scheme', 'Haskell']

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

var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
var js = langs.first(); // JavaScript，相当于$('ul.lang li:first-child')
var haskell = langs.last(); // Haskell, 相当于$('ul.lang li:last-child')
var sub = langs.slice(2, 4); // Swift, Scheme, 参数和数组的slice()方法一致

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!