2

jQuery を使用して DOM から取得した属性から新しい Javascript オブジェクトを作成しようとしています。私が取得しようとしている情報は、これからの data-* です。

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

したがって、data-name と data-weight を取得し、それらを新しい (または必要に応じて既存の) オブジェクトに入れたいと考えています。ここで私は問題を抱えています。オブジェクトを次のようにしたい:

    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

このようにjQueryを使用できます

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

"d" は $('.pickup') の属性を持つオブジェクトで、'data-' で始まります。

于 2012-04-09T04:11:02.873 に答える
0

$(".pickup").data("name")「リンゴ」などを取得します。

私の頭の上からの完全な例。

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