如何在ajax成功JQUERY上更新具有相同类且具有不同返回值的多个div

时间:2016-10-25 22:34:24

标签: jquery ajax

例如,有一组像

这样的div
<div class="size"></div>
<div class="size"></div>

ajax post在成功时将此归还给我。

$.each (data, function (bb) { // data is returned
    console.log (data.newsize);
});

Object 
{name: "a2.jpg", newsize: "37.7 KB"}
{name: "a2.jpg", newsize: "37.7 KB"}
{name: "a1.jpg", newsize: "65.02 KB"}
{name: "a1.jpg", newsize: "65.02 KB"}

如何在newsize类的div中唯一地追加或插入size的值。它只显示两个div中迭代的最后一个值。请告知最佳方式。

1 个答案:

答案 0 :(得分:1)

您可以使用div元素的出现来定位返回的对象数组中元素的索引,并分别对其进行定位。

var data = [{name: "a2.jpg", newsize: "37.7 KB"},
{name: "a2.jpg", newsize: "37.7 KB"},
{name: "a1.jpg", newsize: "65.02 KB"},
{name: "a1.jpg", newsize: "65.02 KB"}];

$.each(data,function(i){
  if($('div.size').eq(i).length) // safe check to see if the corresponding div at the index location does exist
  $('div.size').eq(i).text('size' + data[i].newsize);
});

示例:https://jsfiddle.net/1056u5vd/