How to reverse array of DOM elements using jQuery ?
Last Updated :
15 May, 2023
Given an array of DOM elements, the task is to reverse this array using jQuery. There are two approaches that can be taken to achieve this:
Approach 1: Use inbuilt jQuery methods such as get(), reverse(), and each(). Firstly, select all the required DOM elements using the get() method which returns a JavaScript array. Then, the native JavaScript method reverse() is used to reverse the array of DOM elements. Finally, each() method iterates over each DOM element of the reversed array.
Example: In this example, we will use the above approach.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
</script>
<title>
Reverse array of DOM elements using jQuery
</title>
<style>
body {
text-align: center;
}
p {
font-weight: bold;
font-size: 1.5rem;
}
h1 {
color: green;
font-size: 2.5rem;
}
button {
cursor: pointer;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p>Geek 1</p>
<p>Geek 2</p>
<p>Geek 3</p>
<p>Geek 4</p>
<p>Geek 5</p>
<script type="text/javascript">
$($("p").get().reverse()).each(function (i) {
$(this).text("Geek " + ++i);
});
</script>
</body>
</html>
|
Output:
Approach 2: Using a small jQuery plugin. The plugin jQuery.fn.reverse = [].reverse can be used to reverse an array of DOM elements when coupled with each() method as discussed in the previous approach.
Example: In this example, we will use the above approach.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
</script>
<title>
Reverse array of DOM elements using jQuery
</title>
<style>
body {
text-align: center;
}
p {
font-weight: bold;
font-size: 1.5rem;
}
h1 {
color: green;
font-size: 2.5rem;
}
button {
cursor: pointer;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p>Geek 1</p>
<p>Geek 2</p>
<p>Geek 3</p>
<p>Geek 4</p>
<p>Geek 5</p>
<script type="text/javascript">
$.fn.reverse = [].reverse;
$("p").reverse().each(function (i) {
$(this).text("Geek " + ++i);
});
</script>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...