gpt4 book ai didi

javascript - jQuery/JSON 数据不在创建的 HTML 中循环

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

目前正在尝试遍历 JSON 文件并为每个对象在数据周围创建一个文章标签,因为我使用 HTML 对其进行格式化,我成功并创建了第一个文章标签,但我无法循环到下一个对象$.each 函数

HTML代码

    <body>
<div id='container'>
<div id='content'>
<article class='tumblrPost'>
<header>
<h1> Dragonball Z Motivation </h1>
</header>
<img src='images/dragonball_z.jpg' alt='dragonball z' title='dbz' />
<footer>
<h1> Watch the Video Life & Motivation with Dragonball Z </h1>
</footer>
</article>
</div>
</div>
</body>
</html>

('文档').ready(函数() { 得到帖子(); });

function getPosts() {
var articlePosts = $('div#content article');
$.getJSON('animeTest.json', function(data) {
$.each(data, function(key, val) {
output = "<article>";
output += "<header>";
output += "<h1>" + val.header + "</h1>";
output += "</header>";
output += "<img src='images/" + val.image + "' title='image' />";
output += "<footer>";
output += "<h1>" + val.footer + "</h1>";
output += "</footer>";
output += "</article>";
});
articlePosts.last().after(output);
});
}

最佳答案

您正在覆盖每个周期的输出

 output = "<article>";

快速修复:尝试将内容附加到循环周期内(并且不要声明全局)

$.each(data, function(key, val) {
var output = "<article>";
output += "<header>";
output += "<h1>" + val.header + "</h1>";
output += "</header>";
output += "<img src='images/" + val.image + "' title='image' />";
output += "<footer>";
output += "<h1>" + val.footer + "</h1>";
output += "</footer>";
output += "</article>";
articlePosts.last().after(output);
});

顺便说一句,我觉得在 jQuery 元素上操作比连接 html 更舒服。你应该试试看!

var output = $('<article></article');
var header= $('<header></header');
header.append("<h1>" + val.header + "</h1>").appendTo(output);

output.append("<img src='images/" + val.image + "' title='image' />");

var footer= $ ('<footer></footer>');
footer.append("<h1>" + val.footer + "</h1>").appendTo(output);

articlePosts.last().after(output);

免去了关闭标签的痛苦

关于javascript - jQuery/JSON 数据不在创建的 HTML 中循环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28203430/

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