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

A simple use, but it's very handy for iterating over a table and striping alternate rows:

// Adds CSS styling to alternate rows of tables marked with a .data class attribute.
$("table.data").each(function() {
 if (!$(this).hasClass("noStriping")) {
  $(this).find("tbody tr:nth-child(odd)").addClass("odd");
  $(this).find("tbody tr:nth-child(even)").addClass("even");
 }
});

Answer 2

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

Answer 3

You use the each function to access/modify any dom property that isn't wrapped by jquery.

I often have a grid/table with a column containing checkboxes.

I write a selector to get the list of checkboxes, then set the checked property to true/false. (for check all, uncheck all).

You have to use the each function for that.

$(".mycheckbox").each(function() { this.checked = true; });

Answer 4

I sometimes use it for traversing a large number of subelements in an XML data resultset

   my parsedData = [];  
   $('result', data).each(function() {
      parsedData.push(  
         { name: $('name', this).text(),
           addr: $('addr', this).text(),
           city: $('city', this).text(),
           state: $('state', this).text(),
           zip: $('zip', this).text()
      });

That works pretty nicely.

Answer 5

I use the .each() method for ASP.NET WebMethod calls that return JSON strings. In this example, it populates a listbox with the values returned from the Ajax call:

async: true,
type: "POST",
url: "Example.aspx/GetValues",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
  var list = $('<select />');

  $.each(data.d, function(){
       var val = this.Value;
       var text = this.Text;
       list.append($('<option />').val(val).text(text));
  });

  $('#listbox').empty().append(list.find('option'));
},

ASP.NET has a built-in JSON serializer that automagically converts a class into the JSON string you see at the bottom of this post. Here is an example class that can be returned by the WebMethod:

public class Tuple
{
    public string Text;
    public int Value;

    public Tuple(string text, int val)
    {
        Text = text;
        Value = val;
    }
}

And the WebMethod itself:

[WebMethod]
public static List<Tuple> GetValues()
{
    List<Tuple> options = new List<Tuple>();
    options.Add(new Tuple("First option", 1));
    options.Add(new Tuple("Second option", 2));
    return options;
}

When you specify dataType: "json" in the jQuery Ajax options, the string is automatically converted into a Javascript object, so you can simply type this.Text or this.Value to get the data.

Here is the resulting JSON returned from the WebMethod above:

{"d":[{"Value":1,"Text":"First option"},{"Value":2,"Text":"Second option"}]}

Note: the data.d parameter (and likewise the first value seen in the JSON string) is explained here.