как правильно использовать jquery

Question

Мне нужно добавить новое содержимое на основе файла JSON. Как только я набираю его вручную в html, он работает без проблем, но как только я хочу зациклить, используя jQuery, каждая функция не работает. Обратите внимание, я проверил метод зацикливания с помощью функции alert, и он предупреждает 2 раза, вызывая json content 2 объекта, но это похоже на проблему с функцией добавления. Обратите внимание, что, основываясь на Chrome Inspect, функция добавления не создает 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

Попробуйте добавить класс, используя метод attr в jQuery '' '$ (". Wrapper"). Attr (' class ',' Column side ')' ''

Answer 2

Вы можете использовать шаблонный литерал, если используете браузер, поддерживаемый 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

Имейте в виду, я не советую присваивать один и тот же идентификатор нескольким элементам. Это очень важное правило в 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>

Answer 3

Если вы не используете браузер, совместимый с 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 4

Основная проблема заключается в том, что вы пытаетесь скопировать 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>