jQuery multiplying and adding all values together of fields with a certain class

Question

I have a few <input> elements that look like this:

<input id="hosts" name="250" class="hostselector" type="number" min="0" max="999" value="0" />

I would like to multiply the value (that the user enters) with the value I'm storing in name.

Now there's several elements of this on the page, all with the class="hostselector". I'd like to get the sum of all the values, so in a sense:

(value * name) + (value * name) + .... every single element with that class.

How would I do that using jquery?

James Allardice · Accepted Answer · 2011-07-07 15:50:42Z

4

var total = 0;
$(".hostselector").each(function() {
    total+= parseInt(this.value, 10) * parseInt($(this).attr("name"), 10);
});

This loops through all elements with class .hostselector, multiples the current value by the value of the name attribute (which is a string, hence the use of parseInt), and maintains a running total of all elements.

Here's an example fiddle showing it working (just click the button to see the final result).

answered Jul 7, 2011 at 15:50

James Allardice

166k22 gold badges335 silver badges316 bronze badges

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

2 Comments

asawilliams Over a year ago

I think you could also replace '$(this).attr("name")' with "this.name", or are there browser compatibility problems with that?

James Allardice Over a year ago

@asawilliams - good point, you could absolutely do that. There shouldn't be any browser compatibility problems with it.

ximi · Accepted Answer · 2011-07-07 15:53:21Z

1

It should go something like this:

var total = 0;
$('.hostselector').each(function() {
    total += parseInt($(this).val(), 10) * parseInt($(this).attr('name'), 10);
})

The "total" var holds the number you are looking for.

The parseInt part is more or less optional, javascript will still return you the right result without it, but because .val() and .attr() return you strings it is the proper thing to do.

answered Jul 7, 2011 at 15:53

ximi

5965 silver badges17 bronze badges

Comments

TommyBs · Accepted Answer · 2011-07-07 15:51:05Z

0

try this:

    var sum = 0;   
    $.each('.hostselector', function(i ,item){
    sum +=  $(item).val();
    // or sum += $(item).attr("Your_Attribute_here");
    });
    alert(sum);

answered Jul 7, 2011 at 15:51

TommyBs

9,7484 gold badges37 silver badges74 bronze badges

Collectives™ on Stack Overflow

jQuery multiplying and adding all values together of fields with a certain class

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related