title: the problem about jquery$.ajax in "for" loop
body: <p>I use $.ajax to read xml info in "for" loop</p>
  
  <p>here is my xml file:</p>
  
  <pre><code>&lt;application&gt;
      &lt;app id="id-1"&gt;
    &lt;html_code&gt;
            &lt;div id="id-1" class="portlet"&gt;
                 &lt;div class="portlet-header"Links&lt;/div&gt;
                 &lt;div class="portlet-content"&gt;id-1&lt;/div&gt;
            &lt;/div&gt;
    &lt;/html_code&gt;
     &lt;/app&gt;
      &lt;app id="id-2"&gt;
             &lt;html_code&gt;
                  &lt;div id="id-2" class="portlet"&gt;
                       &lt;div class="portlet-header"Links&lt;/div&gt;
                       &lt;div class="portlet-content"&gt;id-2&lt;/div&gt;
                  &lt;/div&gt;
             &lt;/html_code&gt;
     &lt;/app&gt;
  &lt;application&gt;
  </code></pre>
  
  <p>then I use $.ajax to get the content  in tags ,and prepend to a contain in this page
  here is the js code:</p>
  
  <pre><code>$.ajax({
     ……
    success:function(){
         for (var i = 0; i &lt; $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 () { }
                      });
               }    
    }
  });
  </code></pre>
  
  <p>suppose the $children.length is only 2,so the resault is that in the contain <code>&lt;div id="contain"&gt;</code> there should have <code>&lt;div class="portlet-content"&gt;id-2&lt;/div&gt;</code> and <code>&lt;div class="portlet-content"&gt;id-1&lt;/div&gt;</code></p>
  
  <p>but the resault is that in <code>&lt;div id="contain"&gt;</code> only have one kind ,is <code>&lt;div class="portlet-content"&gt;id-2&lt;/div&gt;</code></p>
  
  <p>what's wrong with this ?</p>
  
  <p>but when I write the alert(""); between <code>for (var i = 0; i &lt; $layout_left_children.length; i++) {</code>and<code>var $temp_id = $layout_left_children.eq(i).attr("id");</code>
  like </p>
  
  <pre><code>  for (var i = 0; i &lt; $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 
  </code></pre>
  
  <p>then the contain could be right  as  </p>
  
  <p>So why could this happened? how can I solve this problem?</p>
  
  <p>thank you:)</p>