Question

A working example没有$.each

<{> Failed example $.each

我正在使用a pie chart plugin从li的数据属性中获取数据来渲染饼图。我尝试在$.each函数中运行脚本时遇到了问题。看起来它无法从每个容器的数据属性中获取数据。任何人都可以弄清楚如何解决这个问题吗？

function chart(chartid,stats) {
  new Chart.Pie(chartid, {
    showTooltips: true,
    chartMinSize: [200, 200],
    chartMaxSize: [250, 250],
    chartData: stats
  });
}

$('.p_pie').each(function(){
  var chartid = $(this).attr('id'),
      arr = [],
      stats = $(this).find('.stats_area li:not(:first)').map(function() {
    return [$(this).data('value').split(',')];
  }).get();
  chart(chartid,stats);
  console.log(JSON.stringify(stats));
});

HTML：

<div id='myChart' class='fl p_pie'></div>
<ul class='stats_area legend fl shr pieID'>
  <li>Gender</li>
  <li class='pie_0' data-value='Male,2,Male,#6495ED'><em>Male</em><span> 2</span></li>
  <li class='pie_1' data-value='Female,5,Female,#DC143C'><em>Female</em><span> 5</span></li>
</ul>


<div id='myChart2' class='fl p_pie'></div>
 <ul class='stats_area legend fl shr pieID'>
   <li>Age</li>
   <li class='pie_0' data-value='1-10,12,1-10,#6495ED'><em>1-10</em><span> 12</span></li>
   <li class='pie_1' data-value='11-20,25,11-20,#DC143C'><em>11-20</em><span> 25</span></li>
 </ul>

Answer 1

您的.p_pie div不包含任何内容。 ;）

Here是jsFiddle，显示.each()工作正常。

在您提供的代码中，您的ul不在div内，因此每个（）都找不到任何要迭代的元素！

现在请记住，在你的代码中，你选择当前元素的ID来创建饼图。这意味着你元素中的任何内容都将被覆盖，正如你在上面的jsFiddle中看到的那样。

要避免这种情况，只需创建一个新div以包含具有所需ID的图表，并从包含数据的div的data-id属性中获取要生成图表的元素的ID。 / p>

Here就是一个例子。

$('.p_pie').each(function () {
    var chartid = $(this).data('id'), // get the data-id attr of the div
        stats = $(this).find('.stats_area li:not(:first)').map(function () {
            return [$(this).data('value').split(',')];
        }).get();
    chart(chartid, stats);
});

Answer 2

变化：

$(this).find('.stats_area li:not(:first)')

要：

$(this).next('.stats_area').find('li:not(:first)')

p_pie是空div，您真正想要的是扫描后面的stats_area。您可以在多种方法中执行此操作，但由于您仍需要p_pie div的图表ID，因此最快的更改是调整上面的代码（在地图之前）。

可以在this Fiddle

看到

Answer 3

它可能对你有帮助

var chartid = $(this).attr('id'),
      arr = [],
      stats = $(this).find('.stats_area li:not(:first)').map(function() {
    return [$(this).find('li[class^="pie_"]').data('value').split(',')];
  }).get();

无法让$ .each在JQuery中工作

3 个答案: