How to traverse an array in jquery

jquery is an excellent Javascript library that provides many convenient APIs to handle various DOM and data operations. When we need to traverse an array, jquery also provides a variety of methods to achieve it.

1. $.each() method

$.each() method is a method used to traverse arrays in jquery. It can traverse any type of collection. Includes arrays, objects and NodeList. The specific syntax is as follows:

$.each(arr, function(index, value) {
  // 遍历操作
});

This method receives two parameters. The first parameter arr is the collection that needs to be traversed, and the second parameter function is the function body executed during traversal, including the two parameters index and value. Represents the index and value of the current element respectively.

For example, we want to traverse an array arr and print the value and index of each array element:

var arr = ['a', 'b', 'c'];

$.each(arr, function(index, value) {
  console.log('index: ' + index + ', value: ' + value);
});

The output result is:

index: 0, value: a
index: 1, value: b
index: 2, value: c

2. $.map () method

$.map() method can also be used to traverse an array, but unlike the $.each() method, it can process the traversal results and return a new array . The specific syntax is as follows:

$.map(arr, function(value, index) {
  // 处理操作
  return value;
});

This method receives two parameters. The first parameter arr is the array to be traversed, and the second parameter function is the function body executed during traversal, including the two parameters value and index. Represents the value and index of the current element respectively.

For example, we want to traverse an array arr and convert the value of each element to uppercase letters:

var arr = ['a', 'b', 'c'];

var newArr = $.map(arr, function(value, index) {
  return value.toUpperCase();
});

console.log(newArr); // ['A', 'B', 'C']

Note that the $.map() method returns a new array , the original array arr will not be modified.

3. $.grep() method

$.grep() method can filter elements that meet the conditions in the array and return a new array. The specific syntax is as follows:

$.grep(arr, function(value, index) {
  // 筛选条件
  return ...
});

This method receives two parameters. The first parameter arr is the array that needs to be traversed, and the second parameter function is the filtering condition, including two parameters value and index, which represent the current element respectively. value and index. If true is returned, it means that the element meets the conditions and is filtered out.

For example, we want to filter out all even numbers in an array:

var arr = [1, 2, 3, 4, 5];

var evens = $.grep(arr, function(value, index) {
  return value % 2 === 0;
});

console.log(evens); // [2, 4]

4. $.inArray() method

$.inArray() method You can find the index position of an element in the array, and return -1 if it does not exist. The specific syntax is as follows:

$.inArray(value, arr);

This method receives two parameters. The first parameter value is the element that needs to be found, and the second parameter arr is the array that needs to be traversed.

For example, we want to find the index position of element 'c' in an array arr:

var arr = ['a', 'b', 'c'];

var index = $.inArray('c', arr);

console.log(index); // 2

It should be noted that the $.inArray() method returns a number, indicating that the element is in The index position in the array. If the element does not exist, returns -1.

In summary, the methods for traversing arrays in jquery include $.each(), $.map(), $.grep() and $.inArray(), etc. We can choose different methods according to our needs. to implement different operations.

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