我需要像這樣創建一個陣列陣列：
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 個陣列，但它們是空的。
uj5u.com熱心網友回復：
哦，你所做的是......var test2 = $(this).contents();不是你需要使用的正確東西。您應該使用.data()和解構物件：
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>我得到的輸出為：
[
[ 20, 10 ],
[ 10, 20 ]
]
uj5u.com熱心網友回復：
最初我打算推薦jQuery 的map方法，但是 -顯然是設計的- 它會自動展平輸出，這只能通過將坐標嵌套在另一個陣列中來解決。它似乎還自動將字串強制轉換為數字，這對您的情況很有用，但它似乎正在做出許多您可能不想要的決定。
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>附加檔案
- 解構賦值
uj5u.com熱心網友回復：
或者，您可以使用純 JS 代替 jQuery：
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/369218.html
標籤：javascript 查询
上一篇：反應，試圖從json回傳道具
下一篇：在打字稿中過濾物件和回傳鍵