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>

我已经尝试了＆＃34;每个＆＃34;并且＆＃34;对于＆＃34;，但它无法正常工作，它最终会填满所有信息。

我只有最后一段代码

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);
}

希望有所帮助：）

P.S。如果您遍历对象并插入带有内容的HTML块，而不是预先呈现HTML并填充它，那将会更好。

编辑：获取后将HTML包装到JQuery元素中。

jQuery - 需要从json动态填充一些Div

2 个答案: