8

I have rows of input boxes (text) that I need to iterate over, multiplying values within a row and then summing the products. The only solution I could find is to convert the input boxes to arrays:

var array1 = $('input[id$="txtVal1"]').toArray();
var array2 = $('input[id$="txtVal2"]').toArray();
var temp1;
var temp2;
var sum=0;

And then iterate and sum using:

for (i = 0; i < array1.length; i++) {
    if (array1[i].value.length > 0) { //make sure we have data
        temp1 = parseFloat(array1[i].value);
        temp2 = parseFloat(array2[i].value);
        sum += temp1 * temp2;
    }
}

This works. However I'm just learning JQuery and want to use the canonical method.

1
  • You can also use $.each(). $('tr').each(function(i, el){alert($(el).find('input[id$="txtVal1"]').val() * $(el).find('input[id$="txtVal2"]').val}))
    – Syon
    Mar 27, 2013 at 15:38

3 Answers 3

12

you can loop directly over all the items found through a selector like this:

$('input').each(function(index,data) {
   var value = $(this).val();
});
2
  • why the index & data? May 19, 2016 at 2:38
  • 1
    Since this is a very generic example, i mention them simply to make the reader aware of their existence as parameters to the each() method.
    – Gung Foo
    May 23, 2016 at 18:01
3

As mentioned you can use .each() to accomplish this task but here is an example that uses your data as requested in the the question. You mentioned 'rows' of input so I'm assuming it's in a table row:

$('tr').each(function () {
    var $this = $(this),
        sum = parseFloat($this.find('input[id$="txtVal1"]').val()) * parseFloat($this.find('input[id$="txtVal2"]').val());
    alert(sum);
});

Here's a jsFiddle Example

3
  • Actually, they are within a div with an ID, so this might work. Thanks to all that submitted ideas. Mar 27, 2013 at 17:07
  • Here's what I tried: $('#divDataRow').each(function () { var $this = $(this); sum += parseFloat($this.find('input[id$="txtVal1"]').val()) * parseFloat($this.find('input[id$="txtVal2"]').val()); alert('sum: ' + sum); }); alert('sum: ' + sum); But even though there are at least two rows, sum is always the product of the first row. (Sorry for the bad formatting, I did read the comments guide but could not insert line breaks...) Mar 27, 2013 at 17:35
  • There should only be one #divDataRow (IDs should be unique), so that wouldn't work. If you need multiples use a class name. And if you're still having problems post a sample of your html and I can give a better answer. Or update the jsFiddle and post back the updated url.
    – Syon
    Mar 27, 2013 at 17:39
2

It's no need to use toArray, use .each() method.

$('input[id$="txtVal1"]').each(function(index) { 
    // do something here
    $(this).addClass( "myClass" );
})
2
  • this will only loop over 1 item, or three if there are 11 consistently numbered inputs.
    – Gung Foo
    Mar 27, 2013 at 15:37
  • @GungFoo, hm... let me check
    – Denis O.
    Mar 27, 2013 at 15:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.