Question

我有2个可折叠的div，其中包含列表。每个列表都应该动态显示JSON信息。我有以下HTML：

<body>
    <div data-role="collapsible-set" data-theme="c" id="set">
        <div data-collapsed="true" data-role="collapsible" data-theme="b" id="trip1">
            <h3>Trip 1</h3>
            <ul data-role="listview" id="info1">
                <li>Name 1</li>
            </ul>
        </div>
        <div data-collapsed="true" data-role="collapsible" data-theme="b" id="trip2">
            <h3>Trip 2</h3>
            <ul data-role="listview" id="info2">
                <li>Name 2</li>
            </ul>
        </div>
    </div>
</body>

以及以下脚本：

<script>
    $(function() {
        $('#trips').collapsible();
    });
    $.getJSON('http://141.219.205.44:8080/json/trip/list', function(data) {

        for ( var i = 0; i < 2; i++) {
             $('#info1 ul').append('<li>' + data[i].name + '</li>').listview('refresh');
        }

</script>

我知道它检索JSON数据就好了，我只是无法将其附加到！

Answer 1

$('#info1 ul')不存在它试图找到名为＃info1的元素，其中包含ul，删除ul并将其附加到ul#info1。

数据对象是什么样的？你确定数据中有那么多项目（0-1）吗？

在你的dom-ready方法周围添加getJSON以确保DOM已加载：

$(function() {
    $('#trips').collapsible();
    $.getJSON('http://141.219.205.44:8080/json/trip/list', function(data) {
        for ( var i = 0;l=data.length; i < l; i++) {
            $('#info1').append('<li>' + data[i].name + '</li>').listview('refresh');
        }
    }
});

将<li>附加到<ul> Jquery Mobile </ul> </li>

1 个答案: