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。