jQuery Create Objectリテラルループ

Question

一連のDOM要素をループし、以下に示すようにjQueryでオブジェクトリテラルを作成する必要があります。私はこれがそれぞれの使用法を含むと推測していますが、私は次に何をするかにちょっと固執しています。

'1': { 
     'text': 'Maintain Compliance', 
     'desc': 'blah', 
     'size': 10, 
     'color': '#afb0b3' 
    }, 
    '2': { 
     'text': 'lorem ipsum', 
     'desc': 'blah.', 
     'size': 4, 
     'color': '#9b9ca0' 
    }, 
    '3': { 
     'text': 'lorem ipsum', 
     'desc': 'blah', 
     'size': 6, 
     'color': '#c5c6c7' 
    } 

Answer 1

.map()を使用すると、オブジェクトの配列を作成できます。

var objects = $('.my_elements').map(function(i,el) { 
    var $el = $(el); 
    return { 
     text:$el.text(), 
     desc:'blah', 
     size:'some_size_property_of_the_element?', 
     color:$el.css('color') 
    }; 
}).get(); 

各繰り返しから返されたオブジェクトがコレクションに追加されます。

このバージョンの.map()は実際にはjQueryオブジェクトを返しますので、配列に変換するには.get()が必要です。

---

もう1つの$.mapを使用して直接アレイを作成することができます。

var objects = $.map($('.my_elements'), function(el,i) { 
    var $el = $(el); 
    return { 
     text:$el.text(), 
     desc:'blah', 
     size:'some_size_property_of_the_element?', 
     color:$el.css('color') 
    }; 
}); 

パラメータが最初のバージョンと逆になっていることに注意してください。簡単にそれに巻き込まれる。

---

そして、あなたは実際には "オブジェクトリテラル"を作成していません。あなたはただオブジェクトを作成しているだけです。 「オブジェクトリテラル」は、オブジェクトの作成に使用される表記法です。

---

また、数値インデックスによって、オブジェクトの配列が必要であると仮定しています。質問に示すように、主な構造は配列であってはならない場合、それはこのように、少し異なるものにする必要があります...

var objects = {}; 

$('.my_elements').each(function(i,el) { 
    var $el = $(el); 
    objects[ i+1 ] = { 
     text:$el.text(), 
     desc:'blah', 
     size:'some_size_property_of_the_element?', 
     color:$el.css('color') 
    }; 
}); 

これは1に番号付けを開始します。私はまだ配列を使用する傾向がありますが。