我需要动态创建一个像这样的简单对象
var markers = {
0 : { "group":1, "icon":"plus" },
1 : { "group":2, "icon":"cross" },
2 : { "group":2, "icon":"minus" },
};
。从 jquery 循环 .each() 从 Dom 获取数据。我试过这个没有成功：
var markers = {};
$('.markers').each(function(i) {
let group = { group: $(this).data("group") };
let icon = { icon: $(this).data("icon") };
let obj = {group, icon};
markers[i] = {arr};
});
我来自php，但我仍然不理解javascript中的多维数组(或在这种情况下的对象)。提前感谢您的任何帮助。
您的表示法是正确的，但是要将它们都放入obj中，您需要执行let obj = {group: group.group, icon: icon.icon}。我知道，很奇怪吧？好吧，问题是，对象的键被按原样解释 - 换句话说，你不能为它分配变量值，除非你使用方括号索引(例如你对markers[i]所做的 - 因为它在方括号中，i被解释为变量而不是键，它的值变成了键)。对于另一部分，您声明了一个变量组并为其分配了对象{group: $(this).data("group")}，因此要设置数据，您需要说group.group- 第一个group获取对象，第二个group获取对象内部的数据，键为group。
var markers = {};
$('.markers').each(function(i) {
let obj = {
group: $(this).data("group"),
icon: $(this).data("icon")
};
markers[i] = obj;
});
console.log(markers)<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="markers" data-group="1" data-icon="icon1">a</div>
<div class="markers" data-group="2" data-icon="icon2">b</div>
<div class="markers" data-group="3" data-icon="icon3">c</div>但是，我建议您使用数组，因为您仍然可以将其称为 [1]、[2] 等，它是一种更简单的数据结构，它允许您在可能需要的情况下轻松迭代它们：
var markers = [];
$('.markers').each(function(i) {
let obj = {
group: $(this).data("group"),
icon: $(this).data("icon")
};
markers.push(obj);
});
console.log(markers)<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="markers" data-group="1" data-icon="icon1">a</div>
<div class="markers" data-group="2" data-icon="icon2">b</div>
<div class="markers" data-group="3" data-icon="icon3">c</div>如果您希望将结果作为具有索引(0, 1, 2, ...)属性(这很奇怪)的对象(如您所述)，则可以：
const markers = [...document.querySelectorAll(".markers")].reduce((ob, el, i) => {
ob[i] = el.dataset;
return ob;
}, {});
console.log(markers);<i class="markers" data-group="1" data-icon="plus">+</i>
<i class="markers" data-group="2" data-icon="cross">x</i>
<i class="markers" data-group="2" data-icon="minus">-</i>由于具有增量数值属性的对象很奇怪 - 并且数组最适合该工作：
const markers = [...document.querySelectorAll(".markers")].reduce((ar, el) => {
ar.push(el.dataset);
return ar;
}, []);
console.log(markers);
console.log(markers[0]); // {"group": "1", "icon": "plus"}<i class="markers" data-group="1" data-icon="plus">+</i>
<i class="markers" data-group="2" data-icon="cross">x</i>
<i class="markers" data-group="2" data-icon="minus">-</i>相反，如果要按标记的group数据集进行分组，则：
const markers = [...document.querySelectorAll(".markers")].reduce((ob, el, i) => {
if (!ob.hasOwnProperty(el.dataset.group)) ob[el.dataset.group] = [];
ob[el.dataset.group].push(el.dataset);
return ob;
}, {});
console.log(markers);<i class="markers" data-group="1" data-icon="plus">+</i>
<i class="markers" data-group="2" data-icon="cross">x</i>
<i class="markers" data-group="2" data-icon="minus">-</i>返回此对象作为结果，其中属性与组 ID 匹配：
{
"1": [
{
"group": "1",
"icon": "plus"
}
],
"2": [
{
"group": "2",
"icon": "cross"
},
{
"group": "2",
"icon": "minus"
}
]
}
如果你想用jQuery的方式做最新的(性能较差)：
const markers = $(".markers").get().reduce(function(ob, el, i) {
const d = $(el).data();
if (!ob.hasOwnProperty(d.group)) ob[d.group] = [];
ob[d.group].push(d);
return ob;
}, {});
console.log(markers);<i class="markers" data-group="1" data-icon="plus">+</i>
<i class="markers" data-group="2" data-icon="cross">x</i>
<i class="markers" data-group="2" data-icon="minus">-</i>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>非常感谢您的所有答案！ ：-)))) 您的解决方案之一对我有用。但出于好奇...
@Roko C. Buljan ：你对我说，想要一个结果作为具有索引(0、1、2、...)属性的对象是很奇怪的......
对我来说，它就像 php 中的一个关联数组：
$markers = array(
['group'=>1,'name'=>'plus'],
['group'=>2,'name'=>'cross'],
['group'=>2,'name'=>'minus']
);
如果我不需要命名我的索引来制作循环...在？还是我？
在 php 中，有关联数组，而在 javascript 中没有。我读到我们必须改用对象...但是，如果我们只需要用这些数据简单地做一个循环呢：
for(marker in markers){
let group = markers[marker].group;
let name = markers[marker].name;
//make things...
}
井。。。我可以在每次需要的时候使用 jquery，而不是在开始时将其存储在 vars 中。但这是这样做的好方法吗？