Using the jQuery each() function to loop through classname elements

javascript jquery each
Brett picture Brett · Mar 13, 2011 · Viewed 57.5k times · Source

I am trying to use jQuery to loop through a list of elements that have the same classname & extract their values.

I have this..

function calculate() {

    // Fix jQuery conflicts
    jQuery.noConflict();

    jQuery(document).ready(function(){    

        // Get all items with the calculate className
        var items = jQuery('.calculate');



    });    

}

I was reading up on the each() function though got confused how to use it properly in this instance.

Answer

Darin Dimitrov picture Darin Dimitrov · Mar 13, 2011 
jQuery('.calculate').each(function() {
    var currentElement = $(this);

    var value = currentElement.val(); // if it is an input/select/textarea field
    // TODO: do something with the value
});

and if you wanted to get its index in the collection:

jQuery('.calculate').each(function(index, currentElement) {
    ...
});

Reference: .each() and .val() functions.

Related questions

jQuery each loop in table row

I am having something like: <table id="tblOne"> <tbody> <tr> <td> <table id="tblTwo"> <tbody> <tr> <td> Items </td> </tr> &…

Read More
jQuery looping .each() JSON key/value not working

I am having problems in looping the key/value of JSON by jQuery .each() function Initially I have a JSON like this: json = {"aaa":[ {"id":"1","data":"aaa1data"} ,{"id":"2","data":"aaa2data"} ], "bbb":[ {"id":"3","data":"bbb1data"} ] } And I would …

Read More
jQuery animated number counter from zero to value

I have created a script to animate a number from zero to it's value. Working jQuery Not Working I now want to run the script several times on the page for each matching class. Below is what I am trying …

Read More