DIV不顯示所有JSON檢索數據

Question

爲什麼此代碼不顯示所有數據。它切斷了顯示。

<script type="text/javascript"> 
    $(document).ready(function() { 
     var url = "http://xxxxxxx/integration/json_news.php"; 
     $.getJSON(url, function(result) { 
      console.log(result); 
      $.each(result, function(i, field) { 
       var source = field.source; 
       var summary = field.summary; 
       var heading = field.heading; 
       var news_date = field.news_date; 
       $("#newsview").append("<tr class='even gradeA' width = '30px'><td><li><b>"+heading+" - "+news_date+"</b> <br />"+summary+"</i></li><br /></td></tr>"); 
      }); 
     }); 
    }); 
    </script> 

這是DIV我打電話給ajax代碼。

<!--NEWS PAGE --> 
       <div data-page="news" class="page cached"> 
        <div class="page-content"> 
         <div id="newsview"></div> 

        </div> 
       </div> 

我使用IntelXDK，建設Framework7混合應用

不知怎的，我能弄清楚爲什麼會這樣，當我在手機上測試。難道Framework7沒有顯示超過一定大小的數據？或者我的代碼有問題。

Answer 1

不幸的是，你的js生成的HTML是無效的。

您正在追加表格行tr至div。它們也包含li。

tr應該是table子節點和li應該是ul或ol子節點。

另外width = '30px'應該沒有空格：width='30px'。順便說一下，你真的想要你的內容如此狹窄的容器？

而且您已經關閉了</i>標籤，該標籤之前沒有打開<i>。

我建議如下：

$("#newsview").append(
    '<div class="even gradeA"><b>'+ 
    heading+ ' - ' +news_date+ 
    '</b><br><i>' +summary+ '</i></div>' 
); 

然後使用CSS樣式它。