jQuery .each() - Practical uses?

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