append（）内のjQuery each（）関数の使い方

Question

多分私は単純なものを見逃しているかもしれませんが、他の誰かがこの質問をどこにでも求めているようには思えません。私は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（）関数が含まれていることを逆にして行うことができますが、これは長いコレクションではパフォーマンスが低下するようです。誰でも何か提案がありますか？

編集：以下の回避策を試してみましたが、新しい不要な要素を挿入する必要があります。代わりに$.eachの

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

Answer 1

使用$.map：

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

Answer 2

あなたはjQuery.map()を見てみたいことがあります。

これは配列をとり、配列を返します。したがって、.appendのDOM要素の配列を返して消費することができます。