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 开始编号，如问题所示。尽管我仍然倾向于使用数组。