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（var i in MyObject）”循环创建这样的新对象，但是当它归结为将属性和值添加到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/

Answer 2

var FinalObject= {}
$('.filter-products select').each(function() {
   var property= $(this).attr('id');
   var value = $(this).val();
   FinalObject[property] = value;
});

console.log(FinalObject);

Answer 3

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

完整的例子离我头顶。

$(".pickup").click(function(){
    MyObject = {
        food:  {
            weight: $(this).data("weight"),
            color: $(this).data("color")
        }
    }
});

Answer 4

你可以像这样使用jQuery

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

“d”是一个对象，其属性为$（'。pickup'）以'data - '开头，那么你可以使用它希望它可以帮到你！

使用Javascript创建动态对象

4 个答案: