jquery - AJAX 仅使用 jQuery 填充最终的 JSON 对象？也使用了 Circliful jQuery 插件

Question

我有一个填充 ajax 请求的 JSON 文件，它检索数据但仅在每个 div 中显示来自 JSON 文件的最后一个对象值。

这里是小片段 - https://jsfiddle.net/cale_b/qxctuw47/

不确定我哪里出错了。

<div class="grid">
</div>

<!-- i've simplified the json in comparison to the jsfiddle -->
var data = [{
    "id": 1,
    "rating": "25",
  },
  {
    "id": 2,
    "rating": "30",
  }
];

jQuery(function($) {
  $.each(data, function(key, value) {
    var profile_data = '';
    // ... other code here
    profile_data += '<div class="grid-item grid-item--width3 grid-item--height3 myStat" data-animation="1" data-animationStep="3" data-percent="' + value.rating + '"></div>';
    // append each one within the each loop    
    $('.grid').append(profile_data);
  });
  $(".myStat").circliful({});
});

Answer 1

您只为所有具有 .myStats 类的元素创建一个 circliful 实例...

改为为每个实例创建一个实例:

$(".myStat").each(function(){
  $(this).circliful({});
});

你的 Fiddle updated