Question

I am working on trying to better understand the jQuery.each() method. Here’s an example I came up with, not very practical, but it performs an action on each selected item from the selected set of elements returned:

// Loop over each link. $( '#links a.number' ).each(  // For each number, run this code. The 'intIndex' is the  // loop iteration index on the current element. function( intIndex ){  // Bind the onclick event to simply alert the iteration index value.     $( this ).bind ('click', function(){         alert( 'Numbered index: ' + intIndex );     }); }); 

What are some examples of practical uses of the .each method you are using in your code? What exactly does $(this) represent?

Answer 1

Note there are two types of jQuery’s each, the one iterates over and returns jQuery objects, the other is a more generic version.

Core/each
Example: Create a csv of all the hrefs on the page. (iterates over matching DOM elements and ‘this’ reffers to the current element)

 var hrefs = '';   $('a').each(function() {       var href = $(this).attr('href');      if (href != undefined && href != '') {          hrefs = hrefs + (hrefs.length > 0 ? ',' + href : href);      }  });   alert(hrefs); 

Utilities/jQuery.each
Iterating over an array or the elements of an object: (via: jQuery Documentation)

$.each( { name: 'John', lang: 'JS' }, function(i, n){   alert( 'Name: ' + i + ', Value: ' + n ); });  $.each( [0,1,2], function(i, n){   alert( 'Item #' + i + ': ' + n ); });