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

Answer 2

您可能需要查看jQuery.map()。

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

如何在append（）中使用jQuery each（）函数

2 个答案: