jQuery .each() help (doesn't doesn't complete before running proceeding lines)
<p>I have a jquery function that takes the data from the 3rd column of a table - runs a function on it - and then replaces the field with the result.</p>

<p>Here's my code:</p>

<pre><code>function getData() {

    $('#tab1_response').html("&lt;img src='images/ajax-loader.gif' border=0&gt; Please wait...").show();

    $('#myTable tr').each(function(index){
        var col1 = $(this).children('td.col1').text();
        $(this).children('td.col3').load('doStuff.php?url='+col1);
    });

    $("#myTable").trigger("update");
    $('#tab1_response').fadeOut(2000);
}
</code></pre>

<p>For some reason the last two lines:</p>

<pre><code>$("#myTable").trigger("update");
$('#tab1_response').fadeOut(2000);
</code></pre>

<p>Don't wait for the .each(function... to complete before running...</p>

<p>Instead the "Please wait..." loader doesn't appear and my table doesn't update meaning the new column isn't sortable (I'm using tablesorter for jquery found here - <a href="http://tablesorter.com/docs/" rel="nofollow">http://tablesorter.com/docs/</a>).</p>

<p>The function does otherwise work and I can see my 3rd column updating with new data.</p>

<p>Is there a simple fix for this???</p>

<p>I hope I've provided enough details but please let me know if you need more information :)</p>
