javascript - 使用 Javascript 创建动态对象

Question

我正在尝试使用 jQuery 从 DOM 中提取的属性创建一个新的 Javascript 对象。我要提取的信息是数据-* 来自:

    <button type='button' class='pickup' data-name="apple" data-weight='1' data-color='red'>food</button>

所以我想获取数据名称和数据权重并将它们放入一个新的(或现有的，如果需要的话)对象中。这是我遇到问题的地方。我希望对象看起来像这样:

    MyObject = {
                food:  {
                        weight: 1,
                        color: 'red'
                       }
                }

我一直在尝试通过“for(MyObject 中的 var i)”循环创建一个这样的新对象，但是当归结为将属性和值添加到 MyObject{} 时，我不知道该怎么做使其发挥作用。

有什么想法或建议吗？

---

下面的答案非常有效!谢谢你!如果我想动态创建怎么办:

    MyObject.food = {} 

来自一个变量，像这样:

    var Name = "meal";
    MyObject.Name = {} // creates MyObject.meal = {};

我该怎么做？我认为 MyObject[Name] = {} 会起作用，但它似乎不适合我。也许我打错了？ :S

Answer 1

如果您不知道属性是什么，您可以循环.attributes 对象。

var attrs = $('.pickup')[0].attributes;  // grab the attributes of the element

var MyObject = {  // create the object
    food: {}
};

  // loop the attributes, and add the data- attributes to the object
$.each(attrs, function(_, v) {
    if (v.name.indexOf('data-') !== -1)
        MyObject.food[v.name.replace('data-', '')] = v.value;
});

http://jsfiddle.net/5m7KF/

---

在 HTML5 兼容的浏览器中，您可以使用元素的 .dataset 属性来获取 data- 属性。

var data = $('.pickup')[0].dataset;  

var MyObject = {  
    food: {}
};

$.each(data, function(k, v) {
    MyObject.food[k] = v;
});

http://jsfiddle.net/5m7KF/1/