Comment utiliser la fonction jQuery each () dans append ()

Peut-être que je manque juste quelque chose de simple, mais il ne semble pas que quelqu’un d’autre ait posé cette question nulle part J’essaie de créer une nouvelle section de nœuds HTML et j’aimerais pouvoir tout faire de manière concise et chaînée.

En gros, j’aimerais faire quelque chose comme ça:

var options = { buttons: { 'New': function() { /* Do some work*/ } 'Edit': function() { /* Do some work*/ } // etc. } }; $( '#container' ).append( $( '
', { 'class': 'table' } ).append( $( '
', { 'class': 'row' } ).append( function() { $.each(options.buttons, function(key, value) { $( '

Ce que j’aimerais que cela se produise est de l’avoir pour que chaque fonction puisse renvoyer un élément de bouton auquel est associé le gestionnaire de clic, pour chaque bouton de l’object options. Il y a d’autres options pour lesquelles j’aimerais faire la même chose, mais je ne peux pas comprendre la syntaxe.

Je sais que cela peut être fait avec l’inverse, la fonction $ .each contenant la fonction .append (), mais cela semble avoir un impact négatif sur les performances des longues collections. Quelqu’un a des suggestions?

Edit: Je dois noter que j’ai essayé ce qui suit comme solution de contournement, mais je dois insérer un nouvel élément inutile.

 $( '
', { 'class': 'row' } ).append( function() { var div = $( '
', { } ); $.each(options.buttons, function(key, value) { div.append( $( '

Utilisez $.map au lieu de $.each :

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

JSFIDDLE DEMO


Notez que vous pouvez le raccourcir un peu si vous supprimez la fonction de l’un des ajouts:

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

JSFIDDLE DEMO

Vous voudrez peut-être jeter un oeil à jQuery.map() .

Cela prend un tableau et retourne un tableau. Ainsi, vous pouvez renvoyer votre tableau d’éléments DOM à consumr .append .