Question

目前正在尝试循环访问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>

（＆＃39; document＆＃39;）。ready（function（）{ getPosts（）; }）;

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);
    });
}

Answer 1

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

 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);

它可以为您节省关闭标签的痛苦

Answer 2

您在每次迭代时重置output。从技术上讲，您可能只看到 last 结果显示为HTML中的文章。

相反，请在output之前声明$.each()，然后才会追加它。完成循环后，将整个结果附加到您的页面：

function getPosts() {
    var articlePosts = $('div#content article');
    $.getJSON('animeTest.json', function(data) {
        var output = ''; // make sure you use 'var' so it's not a global variable
        $.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);
    });
}

最后，如果您发现自己经常构建这样的HTML，我建议您查看各种HTML / JavaScript模板解决方案。通过保持HTML和JavaScript分离，它们可以使您的JavaScript代码更清晰，更易于维护。

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

2 个答案: