Introduction to JQUERY – Iterating Elements with the Each() Method

Guest Posts Paolo Nikko Nuñal

JQUERY has a lot of methods that you can explore. And most of the time first timers who are practicing the JQUERY library are not familiar with it. In this tutorial we are going to deal with the each each() method. This is especially useful to make DOM looping very easy.

So what does the each() method does? First of all, when it is called, it iterates over the DOM elements that are part of the JQUERY object. After each callback runs, it is them passed to the current loop iteration starting from 0.

Syntax

.each(function([INDEX, ELEMENT))

INDEX - The index position of the selector.

ELEMENT - The current element ($this preferred).

To give you an example of how it works, see sample code below.

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
     $("#btn-each").click(function(){
          $(".phones").each(function(){
               alert($(this).text())
      });
    });
 });
</script>
</head>
<body>
<button type="button" id="btn-each">Each()</button>
<div name="communication">
   <h5 class="phones>Nokia</h5>
   <h5 class="phones>Sony</h5>
   <h5 class="phones>Samsung</h5>
</div>
</body>
</html>


Once you click on the "Each()" button, it will automatically iterate all HTML elements having the class name "phones". This is pretty much useful if you are checking table elements like iterating through rows, headers, lists, and just about everything as long as you specify the class or ID of a particular element that you wish to loop through.

There you have it, you now learned how to loop through DOM elements.