如何在 append() 中使用 jQuery each() 函数 [英] How to use jQuery each() function within append()

问题描述

也许我只是遗漏了一些简单的东西，但似乎没有其他人在任何地方问过这个问题.我正在尝试创建一个新的 HTML 节点部分，并希望能够以简洁和链接的方式完成所有工作.

基本上我想做这样的事情:

var 选项 = {纽扣: {'New': function() {/* 做一些工作 */}'编辑':function() {/* 做一些工作*/}//等等.}};$( '#container' ).append($( '<div/>', { 'class': 'table' } ).append($( '<div/>', { 'class': 'row' } ).append( function() {$.each(options.buttons, function(key, value) {$( '<button/>', { text: key } ).click(value);//以某种方式返回这个对象，以便 append 可以使用它});})));

我想要发生的是让每个函数都能够返回一个按钮元素，并为选项对象中的每个按钮返回一个与其关联的点击处理程序.还有其他选项我想做同样的事情，但我无法弄清楚语法.

我知道这可以通过相反的方式完成，让 $.each 函数包含 .append() 函数，但这似乎对长集合的性能有影响.有人有什么建议吗?

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

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

解决方案

使用 $.map 而不是 $.each:

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

JSFIDDLE 演示

<小时>

请注意，如果去掉其中一个附加的功能，您可以将其缩短一点:

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

JSFIDDLE 演示

Maybe I'm just missing something simple, but it doesn't seem like anyone else has asked this question anywhere. I'm trying to create a new section of HTML nodes and would like to be able to do it all in a concise and chained manner.

Basically I'd like to do something like this:

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
            });
        })
    )
);

What I'd like to have happen is to have it so that the each function is able to return a button element with the click handler associated with it for each button in the options object. There are other options in for which I'd like to do the same thing, but I can't figure out the syntax.

I know this can be done with the reverse having the $.each function contain the .append() function, but this seems to have a performance hit for long collections. Anyone have any suggestions?

Edit: I should note that I have tried the following as a work around, but I have to insert a new unneeded element.

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

解决方案

Use $.map instead of $.each:

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

JSFIDDLE DEMO

---

Note that you can shorten it a bit if you get rid of the function of one of the appends:

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

这篇关于如何在 append() 中使用 jQuery each() 函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！