如何在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
            });
        })
    )
);

我想要发生的是拥有它,以便每个函数能够返回一个按钮元素,其中单击处理程序与options对象中的每个按钮相关联.还有其他选项,我想做同样的事情,但我无法弄清楚语法.

我知道这可以通过$ .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;
})

Answer 1

使用$.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