Convert list to array in jquery-Front-end Q&A-php.cn

Convert list to array in jquery

PHPz

Release： 2023-05-28 12:46:08

Original

694 people have browsed it

When writing JavaScript code using jQuery, you often encounter the need to convert a list into an array. In this article, we'll cover how to convert lists into arrays using some methods in jQuery so that you can better understand and use them.

1. Use jQuery’s map method

jQuery’s map method can convert each element in a list into a new value, and then form these new values into a new array and return. Therefore, we can use jQuery’s map method to convert a list into an array.

The sample code is as follows:

var list = $("ul li");  //获取 <ul> 元素中的所有 <li> 元素
var array = $.map(list, function(item) {
  return item.textContent;
});
console.log(array);

Copy after login

In the above code, we first use jQuery's $() method to obtain a list containing all

elements and store it in the variable list . We then use jQuery's map method to iterate over each element in the list and use its content (textContent) as the element value in the new array. Finally, we print the new array to the console.

2. Use jQuery’s each method

In addition to using the map method, we can also use jQuery’s each method to convert the list into an array. The each method is a general method for traversing arrays and objects. This method can perform the same operation on each piece of data. Unlike the map method, the each method does not return a new array, but stores the result of data processing in the original array.

The sample code is as follows:

var list = $("ul li");  //获取 <ul> 元素中的所有 <li> 元素
var array = [];  //创建一个空数组，用于存储处理后的结果
$.each(list, function(index, item) {
  array.push(item.textContent);
});
console.log(array);

Copy after login

In the above code, we also first use jQuery's $() method to obtain a list containing all

elements and store it in a variable in list. We then create an empty array to store the processed results and use the each method to iterate through each element in the list and put its content (textContent) into the array. Finally, we print the new array to the console.

3. Use JavaScript’s Array.from method

You can also use native JavaScript’s Array.from method in jQuery to convert a list into an array. This method converts array-like objects (such as DOM node lists) or iterable objects (such as Sets and Maps) into real arrays.

The sample code is as follows:

var list = $("ul li");  //获取 <ul> 元素中的所有 <li> 元素
var array = Array.from(list).map(function(item) {
  return item.textContent;
});
console.log(array);

Copy after login

In the above code, we also first use jQuery's $() method to obtain a list containing all

elements and store it in the variable list middle. We then use the native JavaScript Array.from method to convert the list to an array, and use the map method to iterate over the new array, converting it into an array containing the text content of each element. Finally, we print the new array to the console.

Conclusion

Through the introduction of this article, I believe you have understood how to convert a list into an array in jQuery. It is worth noting that using the map method and each method can perform more refined processing of each element in the list, and using the Array.from method can easily convert an array-like object into a real array. Therefore, choosing the appropriate method according to actual needs can better improve the efficiency and readability of the code.

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