2

我正在尝试使用 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(var i in MyObject)”循环创建一个这样的新对象，但是当涉及到将属性和值添加到 MyObject{} 时，我不知道如何制作它工作。

有什么想法或建议吗？

下面的答案完美无缺！谢谢！如果我想动态创建：

    MyObject.food = {}

从一个变量，像这样：

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

我该怎么做？我认为 MyObject[Name] = {} 会起作用，但对我来说似乎没有。也许我打错了？:S

4

4 回答 4

4

如果您不知道属性是什么，您可以循环该.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/

于 2012-04-09T02:10:31.637 回答
1 
var FinalObject= {}
$('.filter-products select').each(function() {
   var property= $(this).attr('id');
   var value = $(this).val();
   FinalObject[property] = value;
});

console.log(FinalObject);
于 2013-08-09T15:36:20.013 回答
0

$(".pickup").data("name")会给你“苹果”等。

我脑海中的完整示例。

$(".pickup").click(function(){
    MyObject = {
        food:  {
            weight: $(this).data("weight"),
            color: $(this).data("color")
        }
    }
});
于 2012-04-09T02:02:15.973 回答
0

你可以像这样使用 jQuery

var d = $(".pickup").data();

"d" 是一个属性为 $('.pickup') 的 Object 以 'data-' 开头，你可以使用它希望对你有帮助！

于 2012-04-09T04:11:02.873 回答