Question

I read all the <li> on the page, submit a request to an other page via Ajax. Its all good.

The only problem I have is updating the <li> after the request has comeback. Outside the $.get, $li or $(this) is the current <li>. INSIDE the $.get, $li is always the last <li> on the page and that is my problem.

//For each <li>
$('ul#clients li').each(function(index) {
    $li = $(this);
    $li.append('This is ok');

    //Update Data via Ajax
    $.get("/ajax-update.php", function(data) {  $li.append('This is not OK!'); });

}           

Answer 1

Use var… Without the var prefix, a variable will be defined at the closest parent scope where $li is declared. If $li has never been declared, it will be defined in the global (window) scope.

//For each <li>
$('ul#clients li').each(function(index) {
    var $li = $(this);
    $li.append('This is ok');

    //Update Data via Ajax
    $.get("/ajax-update.php", function(data) {  $li.append('This is not OK!'); });

}