gpt4 book ai didi

javascript - 使用 jQuery append 在 html 中创建列表不起作用

转载 作者:行者123 更新时间:2023-11-30 18:01:39 33 4
gpt4 key购买 nike

我已经盯着这段代码看了好几个小时了,感谢任何输入。

我想使用 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);

最佳答案

假设你显示的 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);
});

关于javascript - 使用 jQuery append 在 html 中创建列表不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16835453/

33 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com