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

Question

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.

Thomas G Henry LLC · Accepted Answer · 2015-06-15 18:17:14Z

78

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.

edited Jun 15, 2015 at 18:17

Thomas G Henry LLC

11.2k9 gold badges32 silver badges33 bronze badges

answered Mar 13, 2011 at 20:11

Darin Dimitrov

1.0m275 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Brett Over a year ago

Thanks very much!! This may be a stupid question, but what does "it's index mean"?

Darin Dimitrov Over a year ago

It's the index in the collection. So for example if you have 3 elements that match the selector this variable will increment on each iteration et and it will represent the index of the current element.

Albert Català Over a year ago

One correction, with Rails and jquery-rails (3.1.0) the parameters are first index and then currentElemnt: jQuery('.calculate').each(function(index,currentElement) ..

SearchForKnowledge Over a year ago

Something I can use: stackoverflow.com/questions/27277272/… ?

Ashish Mishra · Accepted Answer · 2020-09-07 15:18:35Z

3

        $('.calculate').each(function(index, element) {
        $(this).text()
        });

edited Sep 7, 2020 at 15:18

answered Sep 7, 2020 at 13:02

Ashish Mishra

4264 silver badges7 bronze badges

1 Comment

xKobalt Over a year ago

This answer is not aligned with question: $('.editable') is neither declared in the question, nor in the answer

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related