JQuery .each() backwards

JQuery .each() backwards: In this tutorial, we will learn how to iterate a list backwards using .each() method in jQuery? By Pratishtha Saxena, on July 25, 2023

jQuery .each() Loop

This loop is similar to that of the while(), do while(), for() loop in JavaScript. But it does not work the same as them. The each() loop searches all the same tags in the HTML page and then runs for each of them. For example – if each() loop is applied for <p> tag, then all the paragraph tags in the page will be traversed with this loop.

Syntax

The syntax of the jQuery each() loop is:

$('selector').each(function(){})

jQuery .each() Loop Backwards

Now, using this each() method, we will be iterating the list backward as we needed. So for this, we need to pair it along with jQuery's reverse() method before each(). This will completely reverse the iteration of the list which has to be performed.

Syntax

The syntax of the jQuery each() loop backwards is:

$('selector').reverse().each(function(){})

Example: Reversing a list using JQuery .each() backwards

In the example given below, it can be seen how the item list gets inverted as soon as this is implemented using jQuery.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Document</title>
  </head>
  
  <body>
    <h2>jQuery .each() backwards</h2>
    <div>Welcome to Include Help!</div>
    <div>This is a jQuery Tutorial.</div>
    <br>
    <list>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
    </list>
    <br>
    <button>Reverse List</button>
    <hr>
  </body>
  
  <script>
    $(document).ready(function(){
        $('button').click(function(){
            $($("li").get().reverse()).each(function (i) {
                $(console.log($(this).html()));
            });
        })
    })
  </script>
</html>

The output of the above example is:

Example: Reversing a list using for loop

Another way of doing the same thing could be by applying a loop and specifying the condition for the same, which will in return give the output as the reversed list. A for loop is introduced with the condition required for reversing a list. The following example showcases this way.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Document</title>
  </head>
  
  <body>
    <h2>jQuery .each() backwards</h2>
    <div>Welcome to Include Help!</div>
    <div>This is a jQuery Tutorial.</div>
    <br>
    <list>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
    </list>
    <br>
    <button>Reverse List</button>
    <hr>
  </body>
  
  <script>
    $(document).ready(function(){
        $('button').click(function(){
            var listItems = $('li');
            for (var i = listItems.length - 1; i >= 0; i--) {
                console.log(listItems.eq(i).text());
            }
        })
    })
  </script>
</html>

The output of the above example is:

How to remove disabled attribute using jQuery?