How to traverse jquery collection

jQuery is a popular JavaScript library that makes working with HTML documents and DOM elements simpler, faster, and easier to maintain. Its selectors and operation methods allow developers to quickly access and operate elements on the page, improving developers' development efficiency. In development, we often need to process a batch of elements on the page, such as modifying their attributes, adding or deleting nodes, etc. At this time, we need to use jQuery collection traversal to implement batch operations. So, how to traverse jQuery collection?

jQuery collection is an array composed of DOM element objects, which can be obtained through various selectors. As follows:

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

After getting a jQuery object, we can use some methods provided by jQuery to traverse the collection to achieve the effect we want. The following are some commonly used jQuery collection traversal methods:

1. each()

each() method is used to traverse Array or object, it can iterate the $list collection obtained above and execute the specified function on each element.

Syntax:

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

Sample code:

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

Among them, the parameter of the each() method is a function, which will be used in each() Executed on each element traversed in the method. This function provides two parameters:

• #index: the index of the current element.
• value: The value of the current element.

2. map()

map() method can also be used to traverse an array, it will Convert an array into another array and return a new array after executing the function.

Syntax:

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

Sample code:

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

3. filter()

filter The () method is used to filter elements in the collection that meet specified conditions. It can determine whether to include the element in the new collection based on the value returned by the callback function.

Syntax:

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

Sample code:

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

filter()The method will return elements that meet the conditions. These elements can be the same as the original collection The element in the same object, or it can be a new jQuery object.

4. #not()

not() method excludes the specified element in the collection and returns a value that does not contain the specified element new collection.

Syntax:

$(selector).not(selector);

Sample code:

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

not()The method can also accept a function as a parameter, which will be run on each On the element, if the returned value is true, then the element will be included in the new collection.

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

5. find()

find() method filters all descendant elements in the current collection and returns matching specified The selector's collection of elements.

Syntax:

$(selector).find(selector);

Sample code:

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

In these examples, we see that jQuery provides multiple methods to iterate over collections, which makes it easier to process a jQuery collection. , writing code is simpler. Since these methods are inherited from Array.prototype and Object.prototype, they work in jQuery the same way as native JavaScript. So once you master them, you can not only work with collections on jQuery, but you can also use them to operate in native JavaScript.

The above is the detailed content of How to traverse jquery collection. For more information, please follow other related articles on the PHP Chinese website!