.each() JQ Home  <<  Traversal  <<  .each()

Matched set iteration.

Description

The .each() method is used to iterate over a jQuery object, executing a function for each element within the matched set.

  • Each time the callback runs, it is passed the current loop iteration, beginning at 0.
  • The callback is fired in the context of the current DOM element, so the keyword this refers to that element.

Syntax

Signature Description
.each( function(index, Element) )Iterate over a jQuery object, executing a function for each element within the matched set.
.each( function() )Iterate over a jQuery object executing a function.

Parameters

Parameter Description Type
function(index, Element)A function to execute on each element within the matched set.Function

Return

A jQuery object.

.each( function(index, Element) ) ExamplesTraversal  <<  Top

Iterate over a jQuery object, executing a function for each element within the matched set.

In the example below when we press the left button we select all 'td' elements within the table, iterate over the collection changing the background colour to orange.

When we press the right button we select all 'td' elements within the table, iterate over the collection changing the background colour to olive. We break from the loop when we hit the 'td' element with the id of 'tdid1'.

Table For Testing The .each( function(index, Element) ) Signature
Table Row 1, Table Data 1 Table Row 1, Table Data 2
Table Row 2, Table Data 1 Table Row 2, Table Data 2
Table Row 3, Table Data 1 (id of tdid1) Table Row 3, Table Data 2
Table Row 4, Table Data 1 Table Row 4, Table Data 2


$(function(){
  $('#btn11').on('click', function() {
    $('.testtable td').each(function (index, tableElement) { // tableElement == this
      $(tableElement).css('backgroundColor', 'orange'); 
    });
  });
  
  $('#btn12').on('click', function() {
    $('.testtable td').each(function (index, tableElement) { // tableElement == this
      $(tableElement).css('backgroundColor', 'olive'); 
      if ($(this).is('#tdid1')) {
        return false; // break out of the loop
      }
    });
  });
});

Press the button below to action the above code:

             

.each( function() ) Example Traversal  <<  Top

Iterate over a jQuery object executing a function.

We can also use the jQuery object instead of DOM elements by using the $(this) syntax as in the example below.

Table For Testing The .each( function() ) Signature
Table Row 1, Table Data 1  (class of class1) Table Row 1, Table Data 2  (class of class1)
Table Row 2, Table Data 1 Table Row 2, Table Data 2  (class of class1)
Table Row 3, Table Data 1  (class of class1) Table Row 3, Table Data 2
Table Row 4, Table Data 1 Table Row 4, Table Data 2  (class of class1)


$(function(){
  $('#btn13').on('click', function() {
    $('.class1').each(function () {
      $(this).css('backgroundColor', 'teal'); 
    });
  });
});

Press the button below to action the above code:

Related Tutorials

jQuery Basic Tutorials - Lesson 7 - Other Traversal