Question

I have the following function that works properly in Chrome and Firefox, but not in IE7.
The function is supposed to run on every instance of a row in the selected table. In IE 7 it only runs once.

function rowTotalit(targee) {
    var sum = 0;
    var thisRow = targee.closest('tr');
    thisRow.find('td.tmipt input').each(function() {
        var numChk = $(this).val();
        sum = sum + Number(numChk);
        thisRow.find('.total').fadeOut(200, function() {
            $(this).html(sum);
            $(this).fadeIn(500);
            $(this).val(sum);
        });
        thisRow.find('.total').next().val(sum);
    });
}​

Here is the trigger from within another function:

for (trs = 1; trs <= tblerows; trs++) {
    $("#testingmsg").append("ARGH!!" + trs);
    rowTotalit($("#timeChart tr:nth-child(" + trs + ")"));
}​

Output of the testingmsg div in Chrome and Firefox is:

ARGH!!1ARGH!!2ARGH!!3ARGH!!4ARGH!!5ARGH!!6ARGH!!7

In IE7 it’s:

ARGH!!1ARGH!!2

So the output is telling me that the function gets to the each statement within the function and dies in IE. Anyone have any ideas?

UPDATE:
The function that holds the for loop is triggered by a click event on a button:

function addEmAllUp(){
    var tblerows = ($('#timeChart tr').length - 2);
    alert(tblerows);
    for (trs = 1; trs <=tblerows; trs++){
        $("#testingmsg").append("ARGH!!" + trs);
        rowTotalit($("#timeChart tr:nth-child(" + trs +")"));
    }
}

When I click the button more than once, the function increments by 1. So I press it twice, it goes to the second row, third time gets me the third row, etc.

Here is an example of the table row HTML:

 <tr class="timerow">
    <td class='projName' >Holiday<br /><span class='small'>999906</span></td>
<td class="tmipt" align="center"><input type="text" class="numbersOnly  alertME"  name="999906[]" value="0.00" /></td>
    <td class="tmipt" align="center"><input type="text" class="numbersOnly  alertME"  name="999906[]" value="0.00" /></td>
    <td class="tmipt" align="center"><input type="text" class="numbersOnly "  name="999906[]" value="0.00" /></td>
    <td class="tmipt" align="center"><input type="text" class="numbersOnly "  name="999906[]" value="0.00" /></td>
    <td class="tmipt" align="center"><input type="text" class="numbersOnly "  name="999906[]" value="0.00" /></td>
    <td class="tmipt" align="center"><input type="text" class="numbersOnly "  name="999906[]" value="0.00" /></td>
    <td class="tmipt" align="center"><input type="text" class="numbersOnly "  name="999906[]" value="0.00" /></td>
    <td align="center"><div id="total_1" class="total">0.00</div><input type="hidden" name="total_999906" class="total" value="0.00" /></td>
    </tr>

Answer 1

Got it!!

There is another find() statement inside the each() that was killing the each prematurely.

thisRow.find('.total').fadeOut(200, function() {
            $(this).html(sum);
            $(this).fadeIn(500);
            $(this).val(sum);
        });
        thisRow.find('.total').next().val(sum);

I just moved the above code out of the each statement and it works properly.

For anyone who may be suffering with the same problem of IE not running your .each() properly, here is how I debugged my problem.

if($.browser.msie){
alert(someTestValue);
}

I used the above condition to test out different portions of my code for IE only and that not only helped to narrow down what was wrong, but I was able to keep my working code in tact for FF & Chrome.

My final solution was to acutally use the browser if statement to run a different function for IE and another for FF & Chrome.

Thanks to those that offered your help. Hope this helps someone else.