jQuery Misc each() Method

Last Updated : 04 Jul, 2023

The each() Method in jQuery is used to specify the function to run for each matched element. Syntax:

$(selector).each(function(index, element))

Parameters: This method accepts single parameter function(index, element) which is mandatory. It is used to run for each matched element. It contains two parameters.

index: It holds the index position of selector element.
element: It holds the current element.

Example 1: This example use each() method to display each paragraph element.

html

<!DOCTYPE html> <html> <head> <title> jQuery Misc each() Method </title> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">  </script> </head> <body style="text-align:center;"> <h1 style = "color:green;" > GeeksForGeeks </h1> <h2>jQuery each() Method</h2> <button>Click</button> <p>Geeks1</p> <p>Geeks2</p> <p>Geeks3</p> <!-- Script use each() method --> <script>  $(document).ready(function() {  $("button").click(function() {  $("p").each(function() {  alert($(this).text())  });  });  });  </script> </body> </html>

Output:

Before Click on the Button
After Click on the Button

Example 2: This example use each() method to display paragraph element.

html

<!DOCTYPE html> <html> <head> <title> jQuery Misc each() Method </title> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">  </script> </head> <body style="text-align:center;"> <h1 style = "color:green;" > GeeksForGeeks </h1> <h2>jQuery each() Method</h2> <button>Click</button> <p>Geeks1-Geeks2-Geeks3</p> <div style="color:lightgreen;"></div> <!-- Script use each() method --> <script>  $(document).ready(function(){  $("button").click(function(){  $("p").each(function(){  $("div").text($(this).text())  });  });  });  </script> </body> </html>