Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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 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 convert it to array.
The following is syntax of $.makeArray() method-
$.makeArray(obj)
Here obj is an object that we want to convert to an array.
Here are the steps we will follow.
Select the unordered list items using jQuery
Convert the list to an array using the makeArray method of jQuery
Map each item in the array to its innerHTML property
Now you got the array of elements and you can use it as a normal javascript array.
Example
In this example we are convertnt a list of elements into a array using $.makeArray( ) method if 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>
// Convert function to convert a list to an array and display it
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 arrays, objects, and all iterable items. To Convert list of elements in an array using jQuery we follow the steps given below
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() method
In 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 convertnt a list of elements into a 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 to convert list items to an array
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)
});
output.innerHTML = "[ " + items + " ]"
}
</script>
</body>
</html>
4K+ Views
