Jqueryが要素の追加を完了していません - 最後の2つはアペンドされません

Question

ajax呼び出しから配列を受け取り、配列の要素を使用して一連のラジオボックスを作成します。いくつかのラジオボックスだけが追加されています。配列の4つの要素のうち最初の2つが追加され、3つの要素のうち最初の要素のみが追加されます。 ajax呼び出しの配列は、期待どおりです。ループのは正常に動作します。挿入されるテキストは期待どおりに構築されますが、の末尾にが追加されるのではなく、一部だけが追加されます。

<table class="std-table"> 
    <tr> 
     <td><div id="areas"></div></td> 
    </tr> 
</table> 

とのjavascript：ループ内

$(document).on('pagebeforeshow', '#property-details-page', function(){ 

    all_areas = new Array(); 
    var Q001Data = "sql=Q001&dbcall=sql_get_results_array&memid="+<?php echo $member_id?>+"&propid="+<?php echo $property_id?>; 
    $.ajax({ // ### AJAX to get ALL AREAS on page load ### 
     url:"pl_process_ajax_call_property_features.php", 
     type:"POST", 
     data : Q001Data, 
     success:function(msg){ 
      $("#areas").html('<fieldset id="all-areas-radio" data-role="controlgroup" data-mini="true"></fieldset>'); 
      all_areas = JSON.parse(msg); 
      var textToInsert = ''; 
      var i; 
      for (i = 0; i < all_areas.length; ++i) { 
       var area = JSON.stringify(all_areas[i][0]); 
       alert(area+i); 
       textToInsert += '<input type="radio" class="all-areas" name="property-area" id="' + area + '" value="' + area + '"><label for="' + area + '">' + area + '</label>';  
       alert(textToInsert); 
      } 
      $("#all-areas-radio").append(textToInsert);  
      $("[type=radio]").checkboxradio(); 
      $("[data-role=controlgroup]").controlgroup().controlgroup("refresh"); 
     }, 
     error: function (jqXHR, textStatus, errorThrown) { 
      alert("Error Q001!"); 
     }, 
    }); // ### AJAX to get ALL AREAS on page load ### 
    }); // ### document.on 

アラートがすぐ内側何が起こっているか見ている私は、アイデアが不足してきました... は、ここに私のHTMLです。 textToInsertが正しく構築されていますが、の追加が最後の2つの要素に欠落しています。 私はにループ内にを追加しようとしましたが、それは結果に大きな違いはありませんでした。助けてください。

Answer 1

for (i = 0; i <= all_areas.length; i++) { 
    var area = JSON.stringify(all_areas[i][0]); 
    alert(area + i); 
    textToInsert += '<input type="radio" class="all-areas" name="property-area" id="' + area + '" value="' + area + '"><label for="' + area + '">' + area + '</label>';  
    alert(textToInsert); 
} 

このようなforループを使用している場合：あなたはi < all_areas.lengthを使用している

0から変数iストラトので、あなたが事前増分を書く++iもi <= all_areas.length; を使用してすることができますので、ポストインクリメントi++を使用すると、すべてのラジオボタンを取得することができます。

Answer 2

あなたはカウンタを早くインクリメントしています。 ++ iの代わりにi ++を試してみてください