Problem with jquery $ .ajax in "for" loop

Question

I use $ .ajax to read xml information in a for loop

here is my xml file:

<application>
    <app id="id-1">
  <html_code>
          <div id="id-1" class="portlet">
               <div class="portlet-header"Links</div>
               <div class="portlet-content">id-1</div>
          </div>
  </html_code>
   </app>
    <app id="id-2">
           <html_code>
                <div id="id-2" class="portlet">
                     <div class="portlet-header"Links</div>
                     <div class="portlet-content">id-2</div>
                </div>
           </html_code>
   </app>
<application>

then I use $ .ajax to get the content in the tags, and add the js code to the content on this page:

$.ajax({
   ……
  success:function(){
       for (var i = 0; i < $children.length; i++) {                        
        var $temp_id = $children.eq(i).attr("id");  //"$children" have defined in above 
        $.ajax({
              type: "get",
              url: "Database/App_all.xml",
              dataType: "html",
              success: function (xml) {
                        var $temp_code = $(xml).find("app[id='" + $temp_id + "']").find("html_code").html();
                        $($temp_code).appendTo($("#contain")).hide().show('slow');
                         },
                          error: function () { }
                    });
             }    
  }
});

Suppose the length of $ children.length is 2, so the resault is that there <div id="contain">should be <div class="portlet-content">id-2</div>and<div class="portlet-content">id-1</div>

but resault is that <div id="contain">there is only one kind, it<div class="portlet-content">id-2</div>

what's wrong with it?

but when I write a warning (""); between for (var i = 0; i < $layout_left_children.length; i++) {and var $temp_id = $layout_left_children.eq(i).attr("id"); how

  for (var i = 0; i < $children.length; i++) {
            alert($children.eq(i).attr("id"));        //could alert correct "id",first "id-1", then "id-2"                      
            var $temp_id = $children.eq(i).attr("id");  //"$children" have defined in above 

then addition may be correct as

So why could this happen? how can i solve this problem?

Thank you:)

Answer 1

, . -, $temp_id , :

$.ajax({
   ……
  success:function(){
       var $temp_id;
       for (var i = 0; i < $children.length; i++) {                        
          $temp_id = $children.eq(i).attr("id");

-, , $temp_id "id-1" , "id-2" , , , "id-2".

:

2010-12-03: ​​

$.ajax({
   ……
    success:function(){
         for (var i = 0; i < $children.length; i++) {                        
            var $temp_id = $children.eq(i).attr("id");  //"$children" have defined in above 

            $.ajax({
                type: "get",
                url: "Database/App_all.xml",
                dataType: "html",
                success: function($tid) {
                    return function (xml) {
                        var $temp_code = $(xml).find("app[id='" + $tid + "']").find("html_code").html();
                        $($temp_code).appendTo($("#contain")).hide().show('slow');
                    }
                }($temp_id),
                error: function () { }
            });

        }    
    }
});

, , $temp_id , , . $tid , , $temp_id .

: hh54188

"alert" ajax. IE Firefox. , , . , :

for (var i = 0; i < 2; i++) {

    //if (i == 1) alert('stopping execution');

    console.log('loop: ' + i);
    $.ajax({
        url: "Database/App_all.xml",
        dataType: "html",
        success: function () {
            console.log('callback');
        }
    });
}

, :
loop: 0
: 1
callback
callback

. Firefox IE , :
loop: 0
callback
: 1
callback

. . "" JavaScript, . - "" . console.log(). console.log() IE 8+. IE DOM.

Answer 2

, AJAX. async false.

, .