使用 map 函数将列表的数据属性获取到 jQuery 中的数组中答案

【问题标题】：Using map function to get lists' data attributes into an array in jQuery使用 map 函数将列表的数据属性获取到 jQuery 中的数组中
【发布时间】：2014-11-18 15:21:36
【问题描述】：

Working example

Fail example

我正在使用这个pie chart 插件。我想创建一个这样的数组

            [["Male",12,"some text","#222"],
            ["Female",14,"some text","#333"]]

来自li的数据属性data-value，每个都存储一个逗号分隔的字符串：

<ul> 
 <li data-value="12 or below,6,sometext,red">12 or below</li>
 <li data-value="13 or above,19,sometext,yellow">13 or above</li>
</ul>

我没有收到任何错误，但 map 函数没有返回数组，因为饼图没有显示任何内容。谁能告诉我如何从列表中返回一个数组？

失败的代码

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

var arr = [],
    stats = $('.piearea').find('li').map(function()    
            {
               var value = $(this).each(function(){
                   arr =  [$(this).data('value').split(',')];
            })
    return value;
});       
console.log(stats);

chart(stats);

HTML：

   <div class="piearea">
    <div id='age' class='myChart' style='position:relative;width:250px;height:250px;'></div>
     <ul>
       <li data-value="12 or below,6,sometext,red">12 or below
       </li><li data-value="13 or above,19,sometext,yellow">13 or above</li>
    </ul>
   </div>

【问题讨论】：

标签： javascript jquery html arrays

【解决方案1】：

有两个问题。

.map() 的使用不正确
颜色应该是hexa值（没用过上述插件所以不知道有没有办法让颜色名称起作用）

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

var arr = [],
  stats = $('.piearea li').map(function() {
    return [$(this).data('value').split(',')];
  }).get();
console.log(stats);
console.log(JSON.stringify(stats));

chart(stats);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://article-sharing.com/pie.js"></script>
<div class="piearea">
  <div id='age' class='myChart' style='position:relative;width:250px;height:250px;'></div>
  <ul>
    <li data-value="12 or below,6,sometext, #222">12 or below</li>
    <li data-value="13 or above,19,sometext, #333">13 or above</li>
  </ul>
</div>

【讨论】：

【解决方案2】：

您的地图调用应该是：

$('.piearea li').map(function() {
    return [$(this).data('value').split(',')];
});

内部 .each() 调用是你的问题：$(this) 只会返回一个带有一个项目的 jQuery 对象，而你正试图使用 app 来返回它，但你再也不会使用该变量了。

【讨论】：