Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to convert list of elements in an array using jQuery?
We can use jQuery.makeArray() method or jQuery.each() method to convert a list of elements into an array using jQuery. The makeArray() method is the most convenient way to perform this task. This method is used to convert an object into a native array.
Using jQuery makeArray() Method
The $.makeArray() method in jQuery converts an array-like object into a JavaScript array. It takes a single argument and converts it to an array.
Syntax
$.makeArray(obj)
Here obj is an object that we want to convert to an array.
Example
In this example we are converting a list of elements into an array using $.makeArray() method of jQuery.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head>
<body>
<h2>Convert list of elements in an array using jQuery</h2>
<p>Click the following button to convert list of elements in an array</p>
<button id="btn" onclick="convert()"> Click Here </button> <br>
<h3>Given List</h3>
<ul>
<li> Item 1 </li>
<li> Item 2 </li>
<li> Item 3 </li>
<li> Item 4 </li>
<li> Item 5 </li>
</ul>
<h3> Array of list items: </h3>
<p id="output"> </p>
<script>
function convert() {
// Select the unordered list items using jQuery
var list = $('ul li');
// Convert the list to an array using the makeArray method of jQuery
var array = $.makeArray(list);
// Map each item in the array to its innerHTML property
let items = array.map((item) => item.innerHTML);
// Get the element with id "output" to display the result
let output = document.getElementById("output");
// Update the innerHTML of the output element with the items in square brackets
output.innerHTML = "[ " + items + " ]";
}
</script>
</body>
</html>
Using jQuery each() Method
The each() method in jQuery is used to iterate over arrays, objects, and all iterable items. To convert a list of elements into an array using jQuery we follow these steps:
Select all the list items using
$("ul li")Create an empty array to store the list items
Loop through all the selected items using
each()methodIn each iteration, the innerText of the current list item is pushed into the "items" array
Display the list items to the browser
Example
In this example we are converting a list of elements into an array using $.each() method of jQuery.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head>
<body>
<h2>Convert list of elements in an array using jQuery</h2>
<p>Click the following button to convert list of elements in an array</p>
<button id="btn" onclick="convert()"> Click Here </button> <br>
<h3>Given List</h3>
<ul>
<li> Item 1 </li>
<li> Item 2 </li>
<li> Item 3 </li>
<li> Item 4 </li>
<li> Item 5 </li>
</ul>
<h3> Array of list items: </h3>
<p id="output"> </p>
<script>
function convert() {
// Select all list items under a 'ul' element
var list = $('ul li');
// Initialize an empty array to store list items
let items = [];
// Loop through each list item
list.each(function (i, item) {
// Push the text of the current list item to the 'items' array
items.push(item.innerText);
});
// Get the output element and display the result
let output = document.getElementById("output");
output.innerHTML = "[ " + items + " ]";
}
</script>
</body>
</html>
Comparison
| Method | Use Case | Advantage |
|---|---|---|
$.makeArray() |
Convert jQuery objects to native arrays | Simple and direct conversion |
$.each() |
When you need custom processing | More control over iteration logic |
Conclusion
Both methods effectively convert jQuery objects to arrays. Use $.makeArray() for simple conversions and $.each() when you need custom processing during iteration.
5K+ Views
