javascript - 将元素组属性加载为数组数组

Question

我正在编写这个演示代码。如何修改代码以从每个 .box 的属性中获取 data[] 中的数组数组？

let data = [];
$(".box").each(function(){
    data.push($(this).data('color'), $(this).data('size'));

});
console.log(data);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box" data-color="red" data-size="large"></div>
<div class="box" data-color="white" data-size="large"></div>
<div class="box" data-color="green" data-size="medium"></div>
<div class="box" data-color="yellow" data-size="small"></div>

Answer 1

正如评论中所建议的，您需要将要推送的数据包装到数组中，如 @r3wt 所解释的。但是，如果您有多个属性，也许对象数组更适合:

let arrayOfData = [...$(".box")].map(
    box => ({
        color: $(box).data('color'),
        size: $(box).data('size'),
        category: $(box).data('category')
    })
);

console.log(arrayOfData);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="box" data-color="red" data-size="large" data-category="short"></div>
<div class="box" data-color="white" data-size="large" data-category="t-shirt"></div>
<div class="box" data-color="green" data-size="medium" data-category="shoes"></div>
<div class="box" data-color="yellow" data-size="small" data-category="short"></div>