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

• <<    .contents()
• .end()     >>

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

Parameters

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'.

$(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
      }
    });
  });
});

.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.

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

Related Tutorials

jQuery Basic Tutorials - Lesson 7 - Other Traversal

• <<    .contents()
• .end()     >>