jQuery創建對象文字循環

Question

我需要遍歷一系列DOM元素，並使用jQuery創建對象文字，如下所示。我猜這涉及到.each的用法，但我有點卡在下一步做什麼。

'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()轉換爲數組。您可以使用其他$.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編號如圖所示的問題。儘管我仍然傾向於使用Array。