如何正确使用jquery append

Question

我需要根据 json 文件追加新内容。一旦我在 html 中手动键入它，它就可以正常工作，但是一旦我想使用 jQuery 循环每个函数，它就不起作用了。请注意，我已经使用警报函数检查了循环方法，它警报 2 次导致 json 内容 2 个对象，但这似乎是附加函数的问题。请注意，基于 chrome 检查，附加功能不会在主 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);
    });

});

Answer 1

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

此外，您可以使用backticks 来保持代码干净，然后使用$.each 的第二个参数来获取值，而不是通过它们的索引来访问。

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">
        <div class="column middle"> 
          <p>${v.details}</p>
          <a href="${v.link}">More</a>
        </div>
        <div class="column side">
           <img class="image" src="${v.image}">
        </div>
      </div>
       `);
  });

});

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<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>

Answer 2

如果你没有使用兼容 ES6 的浏览器，你可以为每个元素创建一个长字符串，包括适当的对象值：

let info = [{
    "details": "this a text for examples",
    "link": "www.stackoverflow.com",
    "image": "profile.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">\
<div class="column middle"> <p>' + v.details + '</p>\
<a href="' + v.link + '" >More</a></div>\
<div class="column side">\
<img class="image" src="' + v.image + '">\
</div>\
</div>');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">

</div>

Answer 3

尝试在 jQuery 中使用 attr 方法添加类 '''$(".wrapper").attr('class','Column side')'''

Answer 4

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

ES6

let 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"
}];

$(() => {
  $('.wrapper').append(info.map(renderContent));
});

function renderContent(data) {
  return `
    <div class="center">
      <div class="column middle">
        <p id="text">${data.details}</p>
        <a href="${data.link}" id="link">More</a></div>
      <div class="column side">
        <img class="image" id="image" src="${data.image}">
      </div>
    </div>
  `;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper"></div>

ES5 或更低

如果您使用的是 ES5 或更低版本，则可以使用 handlebars 之类的库。

var 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() {
  var template = Handlebars.compile($("#entry-template").html());
  $('.wrapper').append(info.map(v => template(v)));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.4.2/handlebars.min.js"></script>
<div class="wrapper"></div>

<script id="entry-template" type="text/x-handlebars-template">
  <div class="center">
    <div class="column middle">
      <p id="text">{{details}}</p>
      <a href="{{link}}" id="link">More</a></div>
    <div class="column side">
      <img class="image" id="image" src="{{image}}">
    </div>
  </div>
</script>

或者您可以将模板嵌入到 for 循环中。

var 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() {
  var template = Handlebars.compile($("#entry-template").html());
  $('body').append(template(info));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.4.2/handlebars.min.js"></script>

<script id="entry-template" type="text/x-handlebars-template">
  <div class="wrapper">
    {{#each .}}
      <div class="center">
        <div class="column middle">
          <p id="text">{{details}}</p>
          <a href="{{link}}" id="link">More</a></div>
        <div class="column side">
          <img class="image" id="image" src="{{image}}">
        </div>
      </div>
    {{/each}}
  </div>
</script>

仅限函数式 jQuery

​​>

请注意，我建议不要将相同的 ID 分配给多个元素。这是 DOM/HTML/XML 中非常重要的规则。

var 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() {
  $('.wrapper').append(info.map(v => renderContent(v)));
});

function renderContent(data) {
  return $('<div>').addClass('center')
    .append($('<div>').addClass('column middle')
      .append($('<p>').attr('id', 'text').text(data.details))
      .append($('<a>').attr('id', 'link').attr('href', data.link).text('More')))
    .append($('<div>').addClass('column side')
      .append($('<img>').addClass('id').attr('id', 'image').attr('src', data.image)));
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper"></div>