1

我已经盯着这段代码好几个小时了，任何输入表示赞赏。

我想使用 jquery append 从对象数组中在 HTML 文件中创建一个列表，但它只是保持空白。

HTML：

<html>
<head>
    <script src="jquery-1.10.0.js"></script>
    <script src="test.js"></script>
    <title></title>
</head>
<body>
    <div id="list">
    </div>

    <div id="template">
      <div class="info">
        <a class="url"></a>
      </div>
    </div>
</body>
</html>

脚本：

function update(events) {
    var eventList = $('#list');
    eventList.empty();
    events.forEach(
        function(_event) {
            var eventsHtml = $('#template .info').clone();
            eventsHtml.find('.url').text(_event.title)
                                   .attr('href', _event.url);              
            eventList.append(eventsHtml);
        });
}
var events = [{title:'fu',url:'bar'}, {title:'bar',url:'fu'}];
update(events);
4

2 回答 2

2

假设您显示的 JS 代码包含在 test.js 中，请移动此行：

<script src="test.js"></script>

...到正文的末尾（就在结束</body>标记之前），或者将您的代码包装在$(document).ready()处理程序中。

你目前拥有它的方式，这一行：

var eventList = $('#list')

...没有找到'#list'元素，因为脚本在元素被解析之前运行。寻找同样的问题'#template .info'。

您可以将所有代码包装在准备好的处理程序中，或者如果您需要能够update()从其他地方调用该函数，只需包装初始调用：

$(document).ready(function() {
    var events = [{title:'fu',url:'bar'}, {title:'bar',url:'fu'}];
    update(events);
});
于 2013-05-30T11:59:19.940 回答
0

使用以下 JS 代码：

$(document).ready(function(){
   var events = [{title:'fu',url:'bar'}, {title:'bar',url:'fu'}];
   var eventList = $('#list');
   eventList.empty();
   events.forEach(
     function(_event) {
        var eventsHtml = $('#template .info').clone();
        eventsHtml.find('.url').text(_event.title)
                               .attr('href', _event.url);              
        eventList.append(eventsHtml);
     });
  });
于 2013-05-30T12:01:41.833 回答