jQuery Create Object Литеральный цикл - PullRequest
Новая
       6

jQuery Create Object Литеральный цикл

2 голосов
/ 24 декабря 2011

Мне нужно перебрать серию элементов 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'
    }

1 Ответ

5 голосов
/ 24 декабря 2011

Вы бы использовали .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, как показано в вопросе. Хотя я все еще был бы склонен использовать массив.

...