jQuery | Misc each() Method
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.
<!DOCTYPE html><html> <head> <title> jQuery Misc each() Method </title> <script src= </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.
<!DOCTYPE html><html> <head> <title> jQuery Misc each() Method </title> <script src= </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> |
Output:
