如何用数据形成 arrays 的数组

Question

我需要像这样创建一个 arrays 数组：

var serviceCoors = [
        [50, 40],
        [50, 50],
        [50, 60],
    ];

从带有数据的元素：

<div data-latitude="10" data-longitude="20" class="service-points__map"></div>
<div data-latitude="20" data-longitude="10" class="service-points__map"></div>

我正在尝试这个：

var test = [];
$('.service-points__map').each(function(){
        var test2 = $(this).contents();
        var items = [];
        $.each(test2, function(i, val) {
            items.push(val.data);
        });
        test.push(items);
    });

但它不起作用。 我有 2 个 arrays，但它们是空的。

Answer 1

哦，你所做的是... var test2 = $(this).contents(); 不是你需要使用的正确的东西。 您应该使用.data()并解构 object ：

 var test = []; $('.service-points__map').each(function() { var { longitude, latitude } = $(this).data(); test.push([longitude, latitude]); }); console.log(test);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div data-latitude="10" data-longitude="20" class="service-points__map"></div> <div data-latitude="20" data-longitude="10" class="service-points__map"></div>

我得到了 output 为：

[
  [ 20, 10 ],
  [ 10, 20 ]
]

Answer 2

最初我打算建议jQuery 的map方法，但是 -显然是设计- 它会自动展平 output 只能通过将坐标嵌套在另一个数组中来解决。 它似乎也自动将字符串强制转换为数字，这在您的情况下很有用，但它似乎做出了很多您可能不想要的决定。

 const out = $('div').map((i, el) => { const { latitude, longitude } = $(el).data(); return [[ latitude, longitude ]]; }).toArray(); console.log(out);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div data-latitude="10" data-longitude="20" class="service-points__map"></div> <div data-latitude="20" data-longitude="10" class="service-points__map"></div>

Native JS 没有这个问题。 只需拿起元素，然后遍历它们，返回嵌套坐标的新数组。

 const divs = document.querySelectorAll('div'); const coords = Array.from(divs).map(div => { const { latitude, longitude } = div.dataset; return [ +latitude, +longitude ]; }); console.log(coords);

 <div data-latitude="10" data-longitude="20" class="service-points__map"></div> <div data-latitude="20" data-longitude="10" class="service-points__map"></div>

附加文件

• 解构赋值

Answer 3

或者，您可以使用纯 JS 代替 jQuery。 您需要做的就是获取元素，对其进行迭代，创建每个项目的属性数组，并将其推送到test数组中。

 const test = []; const items = document.querySelectorAll('.service-points__map'); items.forEach(item => { test.push([ parseInt(item.getAttribute('data-latitude')), parseInt(item.getAttribute('data-longitude')), ]); }); console.log(test);

 <div data-latitude="10" data-longitude="20" class="service-points__map"></div> <div data-latitude="20" data-longitude="10" class="service-points__map"></div>