0

我有 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 数据，但我无法将它附加到 !

4

1 回答 1

0

$('#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');
        }
    }
});
于 2012-11-13T08:23:13.193 回答