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>

这是我调用ajax代码的DIV。

<!--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来设置它的样式。

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

1 个答案: