jQuery -需要动态地填充json中的一些Divs

Question

下面有一个json，我需要动态地填充一些Divs。

json

information:
  first:
    Image: image-1.jpg
    Title: title-1
    Text: text-1
  second:
    Image: image-2.jpg
    Title: title-2
    Text: text-2
   third:
    Image: image-3.jpg
    Title: title-3
    Text: text-3

html

<div class="article">
  <div class="image"></div>
  <div class="title"></div>
  <div class="text"></div>
</div>
<div class="article">
  <div class="image"></div>
  <div class="title"></div>
  <div class="text"></div>
</div>
<div class="article">
  <div class="image"></div>
  <div class="title"></div>
  <div class="text"></div>
</div>

我需要什么

<div class="article">
  <div class="image">image-1</div>
  <div class="title">title-1</div>
  <div class="text">text-1</div>
</div>
<div class="article">
  <div class="image">image-2</div>
  <div class="title">title-2</div>
  <div class="text">text-2</div>
</div>
<div class="article">
  <div class="image">image-3</div>
  <div class="title">title-3</div>
  <div class="text">text-3</div>
</div>

我已经尝试了“每一个”和“为”，但它没有正常工作，它最终填补了所有的信息。

我只有最后一个密码

for (var i = 0; i < information.length; i++) {
  for (var i = 0; i < article.length; i++) {
    var image = information[i].image;
    $('.article .image').append(image);
  }
}

谢谢!

Answer 1

你可以这样做：

for (var i = 0; i < information.length; i++) {
    var image = information[i].image;
    $('.article').eq(i).find('.image').append(image);
}

https://api.jquery.com/eq/

Answer 2

为了具体解决您的问题，选择器$('.article .image')返回一个元素数组，希望这些元素与您的JSON长度相匹配。如果是这样，您可以使用相同的索引填充HTML：

for (var i = 0; i < information.length; i++) {
    $($('.article .image')[i]).append(information[i].image);
    $($('.article .title')[i]).append(information[i].title);
    $($('.article .text')[i]).append(information[i].text);
}

希望有帮助:)

如果你迭代这个对象并插入内容的HTML块，而不是预渲染HTML并填充它，那就好多了。

编辑：在获取JQuery元素后将它们包装到JQuery元素中。