DIV 不显示所有 JSON 检索到的数据

【问题标题】：DIV not displaying all JSON retrieved dataDIV 不显示所有 JSON 检索到的数据
【发布时间】：2017-06-05 14:29:44
【问题描述】：

为什么这段代码没有显示所有数据。它切断了显示。

<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>

这是我调用ajax代码的DIV。

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

                    </div>
                </div>

我正在使用 IntelXDK 并构建一个 Framework7 混合应用程序

当我在手机上进行测试时，不知何故我可以弄清楚为什么会这样。难道Framework7 不显示超出一定大小的数据？或者我的代码有问题。

【问题讨论】：

标签： javascript json ajax html html-framework-7

【解决方案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 来设置样式。

【讨论】：