CODEWITHSUNDEEP
jqueryloopshtml-tablejquery-selectorseach
Alexandre Bourlier
Alexandre Bourlier

Reputation: 4118

.each() not iterating properly

I have been struggling with this issue for a few hours now without understanding the behaviour I have got. I did not found this issue on any other post (although I have found many related to the .each() method).

Anyway here I am:

This is the HTML I what to iterate upon:

<input type="text" id="investment" /><br />
<table id="fundTable">
        <tr> 
             <td class="rentability"> <span class="someClass"> 0.12 </span> </td>
             <td class="absoluteResult"></td>
        </tr>
        <tr> 
             <td class="rentability"> <span class="someClass"> 0.24  </span> </td>
             <td class="absoluteResult"></td>
        </tr>
        <tr>
            ...
</table>

The idea is: the user will enter a value in the textField #investment. onChange, JQuery will populate the .absoluteResult table column by multiplying the user input by the .rentability value.

Here is the JQuery part then:

$('#investment').change(function() {
        var investment = $('#investment').val(),
            currentlyDisplayedRentability,
            updatedAbsoluteResult

        $('#fundTable tr').each(function(index, tableRow) {
            currentlyDisplayedRentability = $(tableRow + "span").html()
            currentlyDisplayedRentability = parseFloat(currentlyDisplayedRentability)
            updatedAbsoluteResult = currentlyDisplayedRentability * investment
            $(tableRow + "td[class=absoluteResult]").html(updatedAbsoluteResult)
        })
    })

What happens is that all .absoluteResult rows are populated using the value of the first row of the .rentability column. Only one value is used for all the pultiplication. It is as if .each() is iterating correctly on one column (.absoluteResult) and not on the other (.rentability).

I do not understand why.

Upvotes: 1

Views: 426

Answers (3)

Exception
Exception

Reputation: 8379

This works.. 

$('#investment').bind('keyup', function() {
var a = $(this).val();
if (!isNaN(parseFloat(a)) && isFinite(a)) {
    $('table tr').each(function() {
        var x = $(this).find('td.rentability .someClass').html();
        $(this).find('.absoluteResult').html(x * a);
    });
}
else { $('.absoluteResult').html(''); }
});

Here is the fiddle to check http://jsfiddle.net/BcjMj/

Upvotes: 2

Karl Rosaen
Karl Rosaen

Reputation: 4644

I think the issue is in the way you are using selectors to search within each table row; instead of

$(tableRow + "span").html()

try

$(tableRow).find("span").html()

Upvotes: 2

Samich
Samich

Reputation: 30115

Try this:

$('#investment').change(function() {
        var investment = parseFloat($('#investment').val());

        $('table tr').each(function() {
            var $tr = $(this);
            var rentability = parseFloat($tr.find('.someClass').text());

            $tr.find('.absoluteResult').html(investment * rentability);
        })
    })

code: http://jsfiddle.net/qYSAH/1/

Upvotes: 1

Related Questions