Updated April 19, 2023
Introduction to jQuery Array
jQuery array is used to store multiple objects/values in a single array variable. jQuery is a compact and fast JavaScript library. It is rich with lots of new enhanced features. It simplifies HTML document traversal and manipulation, animation, event handling, and Ajax. jQuery has an easy-to-use API that works across cross browsers. It can be used to store the values and utilize them further in the program.
Syntax:
There are different operations which can be performed right from creating an array in jQuery and looking for matching element in the array and much more.
1. Using jQuery makeArray method.
jQuery.makeArray(obj)Parameter:
- The jQuery makeArray method always accepts a single parameter only and this single parameter is the object that needs to be converted.
- The return type of this makeArray jQuery method is Array.
2. Searching for an specific value/object from an array using jQuery inArray method.
jQuery.inArray(value, arrayObj, fromIndex)Explanation:
- The jQuery inArray method is used to search for a specific value/object from an Array and it the first parameter it accepts is the value that needs to be searched.
- The second parameter is the arrayObj from which we will look for mentioned value.
- The third parameter that is fromIndex is optional parameter which is the index of the array at which the search should begin.
- The return type of this inArray jQuery method is the index position of the value in the objArray.
How to Initialize Array in jQuery?
Given below shows how to initialize an array:
Code:
jQuery.makeArray(obj)The jQuery makeArray method is used to convert a jQuery object into an Array.
Explanation:
- The jQuery makeArray method always accepts single parameter only and this single parameter is the object that needs to be converted.
- The return type of this makeArray jQuery method is always an Array.
How to Assign Values to an Array in jQuery ?
Given below shows how to assign values:
Code:
var arrayElements = document.getElementsByTagName(tagName)In jQuery fetching values from HTML DOM and assigning them to an Array is very much simple. For this we will be using document object to fetch the list of details from HTML DOM using either id or class selector or using method getElementsByTagName and mentioning the tag which is defined in HTML.
The document.getElementsByTagName method accepts only one parameter which will be the tag name whose values needs to be fetched from HTML and converted into an array.
Various Operations that can be Performed on jQuery Array
There are various different operation which can be performed. To perform any action/any operation we need to make sure that the elements are converted into and only then any action can be performed else it will cause errors.
Given below are different operations which can be performed:
1. arrayElements.reverse()
Explanation:
- The jQuery method reverse can be applied.
- This method is used to reverse the list of elements in the order they have be pushed.
- The return type of reverse method is an Array object with elements in reverse order of their initial sequence.
- This function doesn’t need any parameter.
2. jQuery.merge(array1, array2)
Explanation:
- The jQuery method merge can be used if we need to merge 2 array elements.
- This method forms a new array that contains all elements from the two array.
- The merge sequence is always the firstArray elements first and secondArray elements are appended to the first.
- This merge method from jQuery is destructive and hence it alters the index and other properties of firstArray.
- The return type of merge method is an Array object with elements combining both array objects.
- This function accepts 2 parameters, first being the firstArray and second the secondArray.
3. jQuery.inArray(value, arrayObj, fromIndex)
Explanation:
- The jQuery inArray method is used to search for a specific value/object from an Array and it the first parameter it accepts is the value which needs to be searched.
- The second parameter is the arrayObj from which we will look for mentioned value.
- The third parameter that is fromIndex is option parameter which is the index of the array at which the search should begin.
- The return type of this inArray jQuery method is the index position of the value in the objArray.
Example of jQuery Array
Given below is the example mentioned:
In this example we will be using jQuery method makeArray and then performing reverse operation on this array and printing it on the HTML DOM.
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery array Example</title>
<style>
div {
color: blue;
}
p {
color: green;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<h2> Types of Birds </h2>
<div>Owls</div>
<div>Parrots</div>
<div>Swallows</div>
<div>Thrush</div>
<p>penguins<p>
<script>
// Step 1: Fetching Elements from the HTML Dom using div as tag name
var arrayElements = document.getElementsByTagName( "div" );
// Step 2: Converting the arrayElemnts into jQuery Array
var finalArray = jQuery.makeArray( arrayElements );
// Step 3: Performing reverse operation on finalArray object using jQuery method
finalArray.reverse();
$( finalArray ).appendTo( document.body );
</script>
</body>
</html>Output:
Using we can see that the original list sequence in the HTML Dom was:
And the output after performing reverse is shown below:
Another important point to note is as we have selected only the Div Elements with tag name as div so that is the reason why penguins are not selected in the array list and neither have been reverse and stay as is in the HTML DOM.
Conclusion
Using jQuery we generate array from HTML Dom and perform various different operations on those array based on the requirement. Different technique have different version support and so make sure you are using the correct approach in your application.
Recommended Articles
This is a guide to jQuery Array. Here we discuss the introduction, how to initialize, assign values, various operations performed & example. You may also have a look at the following articles to learn more –
