Как использовать функцию jQuery each () в append () - PullRequest
Новая
       15

Как использовать функцию jQuery each () в append ()

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

Может быть, я просто упускаю что-то простое, но не похоже, чтобы кто-нибудь еще задавал этот вопрос. Я пытаюсь создать новый раздел узлов HTML и хотел бы иметь возможность сделать все это кратким и последовательным образом.

В основном я хотел бы сделать что-то вроде этого: 

var options = {
    buttons: {
        'New':  function() { /* Do some work*/ }
        'Edit': function() { /* Do some work*/ }
        // etc.
    }
};
$( '#container' ).append(
    $( '<div />', { 'class': 'table' } ).append(
        $( '<div />', { 'class': 'row' } ).append( function() {
            $.each(options.buttons, function(key, value) {
                $( '<button />', { text: key } ).click(value);
                // Somehow return this object so the append can work with it
            });
        })
    )
);

Я хотел бы, чтобы это было так, чтобы каждая функция могла возвращать элемент кнопки с обработчиком щелчка, связанным с ним, для каждой кнопки в объекте параметров. Есть и другие варианты, для которых я хотел бы сделать то же самое, но я не могу понять синтаксис.

Я знаю, что это можно сделать с помощью обратного, если функция $ .each содержит функцию .append (), но это, похоже, снижает производительность для длинных коллекций. У кого-нибудь есть предложения?

Изменить: я должен отметить, что я попытался обойти следующее, но я должен вставить новый ненужный элемент. 

$( '<div />', { 'class': 'row' } ).append( function() {
    var div = $( '<div />', { } );
    $.each(options.buttons, function(key, value) {
        div.append( $( '<button />', { text: key } ).click(value) );
    });
    return div;
})

Ответы [ 2 ]

7 голосов
/ 15 декабря 2011

Используйте $.map вместо $.each: 

return $.map(options.buttons, function(value, key) {
    return $( '<button />', { text: key } ).click(value)[0]; // return DOM node
});

JSFIDDLE DEMO

Обратите внимание, что вы можете сократитьэто немного, если вы избавляетесь от функции одного из дополнений: 

$( '#container' ).append(
    $( '<div />', { 'class': 'table' } ).append(
        $( '<div />', { 'class': 'row' } ).append( 
            $.map(options.buttons, function(value, key) {
                return $( '<button />', { text: key } ).click(value)[0];
            })
        )
    )
);

JSFIDDLE DEMO

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

Возможно, вы захотите взглянуть на jQuery.map().

Это принимает массив и возвращает массив.Таким образом, вы можете вернуть свой массив элементов DOM для использования .append.

...