文章/答案/技术大牛

发布

问如何正确使用jquery追加
EN

Stack Overflow用户

提问于 2019-10-30 08:50:58

回答 4查看 73关注 0票数 1

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

});

javascript

jquery

dom

append

回答 4

Stack Overflow用户

回答已采纳

发布于 2019-10-30 08:57:56

主要问题是您试图复制不起作用的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>

票数 1

Stack Overflow用户

发布于 2019-10-30 09:00:19

如果您使用的是支持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>

仅限Functional 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>

票数 1

Stack Overflow用户

发布于 2019-10-30 09:10:32

如果您使用的不是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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/58617334

复制

相似问题

问如何正确使用jquery追加
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何正确使用jquery追加EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何正确使用jquery追加
EN