如何正确使用jQuery附加

Question

我需要根据json文件添加新内容。一旦我在html中手动键入它，它就不会出现问题，但是一旦我想使用jQuery循环，每个函数都将不起作用。注意，我已经检查了使用警报功能的循环方法，它警报2次导致json内容出现2个对象，但似乎与append函数有关。注意，基于chrome inspect，append函数不会在主div中心内创建div，而是创建每个div并将其单独放置。我是前端开发的菜鸟，对于任何改进和最佳实践的建议都是值得的。

HTML文件

<div class="wrapper">

 <div class="center"> 
         <div class="column middle"> <p id="text"></p>
             <a href="" id="link">More</a></div>
         <div class="column side">
             <img class="image" id="image" src="">
            </div>
        </div>           
</div>
JavaScript文件：

info = 
[
  {"details" : "this a text for examples",
   "link" : "www.google.com",
   "image" : "download.jpg"
},
{

    "details" : "this a text for",
    "link" : "www.google.com",
    "image" : "download.jpg"
}
]



$(document).ready(function(){

$.each(info, function(i,v) {
        $(".wrapper").append("<div class=\"center\">");
        $(".wrapper").append("<div class=\"column middle\"> <p id=\"text\" 
         </p>");
        $(".wrapper").append("<a href=\"\" id=\"link\">More</a></div>");
        $(".wrapper").append("<div class=\"column side\">");
        $(".wrapper").append("<img class=\"image\" id=\"image\" src=\"\">");
        $(".wrapper").append("</div>");
        $(".wrapper").append("</div>");

        document.getElementById("text").innerHTML = info[i].details;
        $("#link").attr("href",info[i].link); 
        $("#image").attr("src",info[i].image);
    });

});

我需要根据json文件添加新内容。一旦我在html中手动键入它，它就不会出现问题，但是一旦我想使用jQuery循环，每个函数都将不起作用。注意，我检查了...

Answer 1

主要问题是您试图复制无效的id。请记住id属性必须是唯一的，因此，如果确实需要id，则可以附加索引以使其唯一。

Answer 2

如果不使用与ES6兼容的浏览器，则可以为每个元素制作一个长字符串，包括适当的对象值：

Answer 3

尝试在jQuery中使用attr方法添加类'''$（“。wrapper”）。attr（'class'，'Column side'）'''

Answer 4

[如果使用的是ES6支持的浏览器，则可以使用模板文字。