我需要构建一个数组数组，难以概念化答案

【问题标题】：I need to build an array of arrays, having trouble conceptualizing我需要构建一个数组数组，难以概念化
【发布时间】：2014-02-23 17:04:56
【问题描述】：

我正在尝试为采用此数组的 Chart.js 收集值

data = [{ value:1, color:#123456 }]

HTML：

<table class="card">
    <tr class="section1">
        <td class="label">One</td>
        <td class="goal">1</td>
    </tr>
    <tr class="section2">
        <td class="label">Two</td>
        <td class="goal">2</td>
    </tr>
    <tr class="section3">
        <td class="label">Three</td>
        <td class="goal">3</td>
    </tr>
    <tr class="section4">
        <td class="label">Four</td>
        <td class="goal">4</td>
    </tr>
    <tr class="section5">
        <td class="label">Five</td>
        <td class="goal">5</td>
    </tr>
    <tr class="section6">
        <td class="label">Six</td>
        <td class="goal">6</td>
    </tr>
</table>

CSS：

table.card tr.section1 td.label{
    color: #c26558;
}
table.card tr.section2 td.label{
    color: #cdaf76;
}
table.card tr.section3 td.label{
    color: #6e9874;
}
table.card tr.section4 td.label{
    color: #809ead;
}
table.card tr.section5 td.label{
    color: #467082;
}
table.card tr.section6 td.label{
    color: #ac9578;
}

JAVASCRIPT：

var data = []; //{ value: 30, color:"#F38630" },
var goals = document.getElementsByTagName( $('table.card .goal').html() );
var quantities = jQuery.makeArray( goals );

for( var i=0; i<quantities.length; i++ ){
    var labelColor = '#000000';

    $('table.card .goal').each(function(){
        if( $(this).html() == quantities[i] ){
            labelColor = rgb2hex( $(this).closest('tr').find('.label').css('color') );
        }
    });

    data[i] = { 'value':quantities[i], 'color':labelColor };
}

这是我最近一次尝试制作一系列数量的工作。在 makeArray() 之前，我一直在摆弄 jQuery.toArray()。我不知道，也许我的整个方法都关闭了。抓取 css('color') 的块正在工作，我对此很满意，但我很难将 .goal 单元格的值转换为数组。

这里是 Chart.js 文档：http://www.chartjs.org/docs/

【问题讨论】：

document.getElementsByTagName( $('table.card .goal').html() ); 你明白getElementsByTagName() 是做什么的吗？
是的，就像我说的，这是我最近的尝试，我通过添加 html() 来抓住稻草。不过谢谢，那是
令人沮丧，伙计。我希望我在一小时前注意到我使用了 TagName 而不是 ClassName，更不用说在我发布到 stackoverflow 之前了。
啊，我明白了。您正在尝试构建一个选择器，例如"section" + $('table.card .goal').html()。是的，这需要一次完成一个。有一些复杂的选择器可用于根据属性的开头进行选择，例如$("tr[class^=section]"); 可以抓取所有tr 元素，其中class 属性以"section" 开头。
查看 jQuery API 的selectors category 了解更多选择器信息。有些是有效的本机选择器，可与本机 querySelector/querySelectorAll 方法一起使用。还有一些特定于 jQuery 的选择器引擎。

标签： javascript jquery html css chart.js

【解决方案1】：

我认为你让它变得比需要的复杂得多。只需选择 td.goal 元素，然后使用 .map() 将对象返回到包含当前目标值的新数组。

var result = $("table.card tr[class^=section] td.goal").map(function(i, tr) {
    var goal = $(this);
    return {
        value: parseInt(goal.text(), 10),
        color:goal.prev().css('color') || '#000000'
    };
}).toArray();

【讨论】：

很好，这个地图功能正是我想要的！谢谢！
对后代的重要补充， text() 函数不被识别为数字，因此您必须像这样包装返回： return {value: parseInt(goal.text()), color :goal.prev().css('颜色') || '#000000'} p.s.我喜欢'||返回末尾的黑色'，非常优雅的解决方案。
@NominalAeon：好点。我忽略了转换。将更新彻底。谢谢。

【解决方案2】：

使用.map()

Fiddle Demo

var data = $('.card tr').map(function () {
    $this = $(this);
    return {
        value: $this.find('.goal').text(),
        color: $this.find('.label').css('color') //will return like "rgb(194, 101, 88)"
    }
}).get();
console.log(data);

【讨论】：

感谢您的回复！
@NominalAeon 欢迎:)