如何给每个div加一个JSON的值？

Question

如何将 JSON 中的一个元素添加到每个 div？（每个 div 应该是其他图像）

html

<div class="card"></div>
<div class="card"></div>
<div class="card"></div>

脚本

var i;
    var jsonURL = "img.json";
    $.getJSON(jsonURL, function (json){
        var img= "";
    $.each(json.images, function () {
    for(i=1;i<=2;i++){
        img += '<img src= "' + this.url + '">';
        }
});
    $(".card").append(img);
  });

json

{ "images": [
{"url": "f1.png"},
{"url": "f2.png"},
{"url": "f3.png"} ]}

Answer 1

遍历每个 class 并获取带有索引的图像 url。

var json = { "images": [
{"url": "f1.png"},
{"url": "f2.png"},
{"url": "f3.png"} ]};
    $('.card').each(function (i, v) {
       var img = '<img src= "' + json.images[i].url + '">';
        $(v).append(img)
       
        }
    );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>

Answer 2

根据你的问题，我假设你想添加图像，div by div。这可以通过 eq() 完成，如下所示。

$.each(json.images, function (key, value) {
   $(".card").eq(key).append('<img src= "' + value.url + '">');    
});

var json = { "images": [
{"url": "f1.png"},
{"url": "f2.png"},
{"url": "f3.png"} ]};

$.each(json.images, function (key, value) {
        $(".card")
          .eq(key)
          .append('<img src= "' + value.url + '">');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>

如何给每个div加一个JSON的值？

How to add one value of JSON to each div?

html

javascript

each

jquery

json