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 reverse array of DOM elements using jQuery?
The array of DOM elements is an array of same multiple elements or of those elements which contains same class or the selecting attribute. Our task is to reverse an array of DOM elements using jQuery. There will be a lot of ways to reverse an array of DOM elements. But, in this article, we are going to discuss about the two methods to reversing and array of DOM elements.
By using a for loop
By using the reverse() method
Let us now discuss both of these methods in details by practically implementing them with the help of jQuery code example.
By Using a for Loop
We can reverse the elements of an array by using a for loop and swap the first and last elements in first iteration, then second and second last in second iteration and upto so on. In this way, we will get a reversed array at the end of the for loop. This approach will take O(n) time and O(1) extra space to reverse the array.
Let us now implement it practically with the help of code example and understand the working of this approach in details.
Steps
Step 1 − In the first step, we will define multiple elements with a same class in the HTML document.
Step 2 − In the next step, we will grab or select all those elements with the help of class selector inside a JavaScript variable using jQuery.
Step 3 − In this step, we will iterate through the DOM elements array and swap the corresponding position elements from start and the end.
Example
The below example will explain how you can implement the above algorithm and the approach to reverse the array of DOM elements −
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>
<h2> Reversing array of DOM elements using jQuery </h2>
<p class = "my_para"> Para 1 </p>
<p class = "my_para"> Para 2 </p>
<p class = "my_para"> Para 3 </p>
<p class = "my_para"> Para 4 </p>
<p class = "my_para"> Para 5 </p>
<p class = "result1"> Text of the Paragraph tags and array elements before reversing array elements: </p>
<p class = "elements1"> </p>
<p class = "result2"> Text of the Paragraph tags and array elements after reversing array elements: </p>
<p class = "elements2"> </p>
<script>
var resultArray = $('.my_para');
var elements1 = $('.elements1');
var elements2 = $('.elements2');
var n = resultArray.length;
var j = n - 1;
for (var i = 0; i < n; i++) {
var val = resultArray[i].innerHTML;
elements1.append(" <b> " + val + " </b>, ")
}
for (var i = 0; i < n; i++) {
var x = resultArray[i];
resultArray[i] = resultArray[j];
resultArray[j] = x;
}
for (var i = 0; i < n; i++) {
var val = resultArray[i].innerHTML;
elements2.append(" <b> " + val + " </b>, ")
}
</script>
</body>
</html>
In the above example, we have used a for loop to reverse the elements of the DOM elements array. On the output screen, you will see that the sequence of the array elements before and after reversing is changed.
By Using the Reverse() Method
We can use the reverse() method of jQuery with some other methods of jQuery like get() and each() to accomplish the task of reversing the elements of the array of DOM elements. The get() method will grab all the elements of same type and then reverse() method will reverse each element and each() method will iterate through all the elements of the array.
Let us understand it practically with the help of code example and implement to see its working in details.
The algorithm of the above method and this method is almost same you just need to replace the method of reversing the array elements with reverse method approach instead of for loop approach.
Example
In this example, we use the reverse() method of jQuery with get() method inside the $ selector of the DOM. We print the before and after sequence of the array elements values, which will be different and reverse of each other.
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>
<h2> Reversing array of DOM elements using jQuery </h2>
<p class = "my_para"> Para 1 </p>
<p class = "my_para"> Para 2 </p>
<p class = "my_para"> Para 3 </p>
<p class = "my_para"> Para 4 </p>
<p class = "my_para"> Para 5 </p>
<p class = "result1"> Text of the Paragraph tags and array elements before reversing array elements: </p>
<p class = "elements1"> </p>
<p class = "result2"> Text of the Paragraph tags and array elements after reversing array elements: </p>
<p class = "elements2"> </p>
<script>
var resultArray = $($('.my_para').get());
var elements1 = $('.elements1');
var elements2 = $('.elements2');
var n = resultArray.length;
var j = n - 1;
for (var i = 0; i < n; i++) {
var val = resultArray[i].innerHTML;
elements1.append(" <b> " + val + " </b>, ")
}
resultArray = $($('.my_para').get().reverse());
for (var i = 0; i < n; i++) {
var val = resultArray[i].innerHTML;
elements2.append(" <b> " + val + " </b>, ")
}
</script>
</body>
</html>
Conclusion
In this article, we have discussed about the two different methods of reversing the array of DOM elements. We have discussed and understand both the approaches in details by practically implementing them with the help of code examples.
452 Views
To Continue Learning Please Login