Question

无法让 $.each 在 JQuery 中工作

2014-11-27

51

javascript jquery html

不使用 $.each >

使用 $.each >

我正在使用饼图插件，该插件从 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 不包含任何内容。 ;)

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

在您提供的代码中，您的 ul 不在 div 内，因此 each() 找不到任何要迭代的元素！

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

为了避免这种情况，只需创建一个具有所需 ID 的新 div 来包含图表，然后从包含数据的 div 的 data-id 属性中获取要在其中制作图表的元素的 ID。

这里就是一个例子。

$('.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，因此最快的更改是调整上面的代码（在地图之前）。

这可以在这个 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();