在jQuery中使用map函数获取列表的数据属性到数组中 [英] Using map function to get lists' data attributes into an array in jQuery

问题描述

工作示例

失败示例

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

$ $ p $ $ $ $ $ $ $ [[男，12，一些文本， ＃222]，
[Female，14，some text，＃333]]

$来自 li 数据属性数据值的b $ b

，每个存储一个以逗号分隔的字符串：

 < ul> 
< li data-value =12或以下，6，sometext，red> 12或以下< / li> 
< li data-value =13或以上，19，sometext，yellow> 13或以上< / li> 
< / ul> 
  

我没有收到任何错误，但map函数没有返回一个数组作为饼图没有显示任何东西。有人会告诉我如何从列表中返回数组吗？

失败代码

  function chart（stats）{
 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（'，'）]; 
} ）
返回值; 
}）; 
 console.log（stats）; 
 
图表（统计）; 
  

HTML：

 < div class =piearea> 
< div id ='age'class ='myChart'style ='position：relative; width：250px; height：250px;'>< / div> 
< ul> 
< li data-value =12或以下，6，sometext，red> 12或以下
< sometext，yellow> 13或以上< / li> 
< / ul> 
< / div> 
  

解决方案

有两个问题。
$ b

1. 使用.map（）不正确


2. 颜色应该是十六进制值插件，所以不知道是否有办法让颜色名称工作）

function chart（统计信息）{new Chart.Pie（'age'，{showTooltips：true，chartMinSize：[200，200]，chartMaxSize：[250,250]，chartData：stats}）;} var arr = []，stats = $（ '（）。）（）;。）（）;。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或以下，6，sometext，＃222> 12或以下< / li> < li data-value =13或以上，19，sometext，＃333> 13或以上< / li> < / div>  

Working example

Fail example

I'm using this pie chart plugin. I want to create an array like this

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

from li data attributes data-value, each of which stores a comma-separated string:

<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>

I'm not getting any error but the map function isn't returning an array as the pie chart isn't showing anything. Would anyone show me how to return an array from the lists?

Failed Code

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>

解决方案

There are 2 problems.

1. The use of .map() is not proper
2. The color should be hexa value(haven't used the said plugin so don't know if there is a way to make color names to work)

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>

这篇关于在jQuery中使用map函数获取列表的数据属性到数组中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！