Comment parcourir la collection jquery

jQuery est une bibliothèque JavaScript populaire qui rend le travail avec des documents HTML et des éléments DOM plus simple, plus rapide et plus facile à maintenir. Ses sélecteurs et méthodes de fonctionnement permettent aux développeurs d'accéder et d'exploiter rapidement les éléments de la page, améliorant ainsi l'efficacité du développement des développeurs. En développement, nous devons souvent traiter un lot d'éléments sur la page, comme modifier leurs attributs, ajouter ou supprimer des nœuds, etc. À l'heure actuelle, nous devons utiliser la traversée de collection jQuery pour implémenter des opérations par lots. Alors, comment parcourir la collection jQuery ?

Une collection jQuery est un tableau d'objets éléments DOM qui peuvent être obtenus via divers sélecteurs. Comme suit :

var $list = $('ul li'); // 获取所有ul下的li元素

Après avoir obtenu un objet jQuery, nous pouvons utiliser certaines méthodes fournies par jQuery pour parcourir la collection afin d'obtenir l'effet souhaité. Voici quelques méthodes de traversée de collection jQuery couramment utilisées :

1. each()

each()

each()方法用于遍历数组或对象，它可以迭代以上获取到的$list集合，对每个元素执行指定的函数。

语法：

$.each(array, function(index, value) {
  // 处理函数体
});

示例代码：

$list.each(function(index) {
  console.log(index + ": " + $(this).text());
});

其中，each()方法的参数是一个函数，该函数将在each()方法中遍历的每个元素上执行。该函数提供两个参数：

• index：当前元素的索引。
• value：当前元素的值。

2. map()

map()方法也可以用于遍历数组，它将一个数组转换成另一个数组，执行函数后返回一个新数组。

语法：

$.map(array, function(value, indexOrkey) {
  // 处理函数体
});

示例代码：

var newArr = $list.map(function(index) {
  return $(this).text();
});
console.log(newArr);

3. filter()

filter()方法用于筛选集合中满足指定条件的元素。它可以根据回调函数返回的值来确定是否将该元素包含在新的集合中。

语法：

$(selector).filter(function(index){
  // 处理函数体
});

示例代码：

var $filtered = $list.filter(function(index) {
  return $(this).hasClass('active');
});
console.log($filtered);

filter()方法会返回满足条件的元素，这些元素可以是与原来的集合中的元素相同的对象，也可以是一个新的jQuery对象。

4. not()

not()方法排除集合中指定的元素，返回一个不包含指定元素的新的集合。

语法：

$(selector).not(selector);

示例代码：

var $notFiltered = $list.not('.disabled');
console.log($notFiltered);

not()方法还可以接受一个函数作为参数，该函数将运行在每个元素上，如果返回的值是true，那么该元素将会被包含在新的集合中。

var $notFiltered = $list.not(function(index) {
  return $(this).hasClass('active');
});
console.log($notFiltered);

5. find()

find()方法筛选当前集合中的所有后代元素，返回匹配指定选择器的元素集合。

语法：

$(selector).find(selector);

示例代码：

var $found = $list.find('a');
console.log($found);

在这些示例中，我们看到jQuery提供了多种方法来遍历集合，这使得在处理一个jQuery集合时，代码编写更加简单。既然这些方法都是从Array.prototype和Object.prototypeeach() est utilisée pour parcourir des tableaux ou objets, il peut parcourir la collection $list obtenue ci-dessus et exécuter la fonction spécifiée sur chaque élément.

🎜Syntaxe : 🎜rrreee🎜Exemple de code : 🎜rrreee🎜Parmi eux, le paramètre de la méthode each() est une fonction qui sera exécutée sur chaque élément parcouru dans la méthode each(). Cette fonction fournit deux paramètres : 🎜

🎜index : l'index de l'élément courant. 🎜value : La valeur de l'élément actuel.

🎜La méthode map()

🎜map() peut également être utilisé Pour parcourir des tableaux, il convertit un tableau en un autre tableau et renvoie un nouveau tableau après avoir exécuté la fonction. 🎜🎜Syntaxe : 🎜rrreee🎜Exemple de code : 🎜rrreee

🎜filter()

🎜filter() La méthode est utilisée pour filtrer les éléments de la collection qui répondent aux conditions spécifiées. Il peut déterminer s'il convient d'inclure l'élément dans la nouvelle collection en fonction de la valeur renvoyée par la fonction de rappel. 🎜🎜Syntaxe : 🎜rrreee🎜Exemple de code : 🎜rrreee🎜La méthode filter() renverra les éléments qui remplissent les conditions. Ces éléments peuvent être les mêmes objets que les éléments de la collection d'origine, ou ils. peut être un nouvel objet jQuery. 🎜

🎜not()

🎜not() exclut l'élément spécifié dans la collection et renvoie un not Une nouvelle collection contenant les éléments spécifiés. 🎜🎜Syntaxe : 🎜rrreee🎜Exemple de code : 🎜rrreee🎜La méthode not() peut également accepter une fonction comme paramètre, qui sera exécutée sur chaque élément. Si la valeur renvoyée est vraie, alors. L'élément sera inclus dans la nouvelle collection. 🎜rrreee

🎜La méthode find()

🎜find() filtre tous les éléments descendants de la collection actuelle, Renvoie une collection d'éléments correspondant au sélecteur spécifié. 🎜🎜Syntaxe : 🎜rrreee🎜Exemple de code : 🎜rrreee🎜Dans ces exemples, nous voyons que jQuery fournit une variété de méthodes pour parcourir les collections, ce qui simplifie l'écriture de code lorsqu'il s'agit d'une collection jQuery. Puisque ces méthodes sont héritées de Array.prototype et Object.prototype, elles fonctionnent dans jQuery de la même manière que JavaScript natif. Ainsi, une fois que vous les maîtrisez, vous pouvez non seulement travailler avec des collections sur jQuery, mais également les utiliser pour fonctionner en JavaScript natif. 🎜

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!