如何在 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() 函数的反向来完成，但这似乎对长集合有性能影响。有人有什么建议吗？

编辑：我应该注意我已经尝试了以下作为解决方法，但我必须插入一个新的不需要的元素。

$( '<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

Answer 2

您可能想看看jQuery.map()。

这需要一个数组并返回一个数组。因此，您可以返回您的 DOM 元素数组以供 .append 使用。