Añadir elementos múltiples al menú contextual

Estoy usando el menú contextual en mi clic derecho basado en los datos en el elemento DOM.

y el código Javascript para ello es:

$(function(){ $('.context-menu-one').on('contextmenu', function(e){ var data = $("#strngTitle").text(); $.contextMenu({ selector: '.context-menu-one', items: { data: { name: data, callback: function (key, opt) { alert("Clicked on " + data); } } } }); }); }); 

que está funcionando bien. Pero quiero mostrar el elemento del menú contextual más de una vez, así que probé:

 $('.context-menu-one').on('contextmenu', function(e){ var data = $("#strngTitle").text(); $.contextMenu({ selector: '.context-menu-one', items: for (var i = 0; i < 2; i++) { { data: { name: data, callback: function (key, opt) { alert("Clicked on " + data); } } } } }); }); 

Significa que debe formar:

  items: { data: { name: data, callback: function (key, opt) { alert("Clicked on " + data); } }, data: { name: data, callback: function (key, opt) { alert("Clicked on " + data); } }, } 

pero no puedo usar el bucle for en esto. ¿Cómo puede hacerse esto?

El tipo de parámetro de los ítems es objeto.

http://medialize.github.io/jQuery-contextMenu/docs.html

Prueba esto.

 $('.context-menu-one').on('contextmenu', function(e){ var data = $("#strngTitle").text(); $.contextMenu({ selector: '.context-menu-one', items: { data: { name: data, callback: function (key, opt) { alert("Clicked on " + data); } } data2: { name: data, callback: function (key, opt) { alert("Clicked on " + data); } } data3: { name: data, callback: function (key, opt) { alert("Clicked on " + data); } } } }); }); 

Actualizado.

El siguiente código significa objeto.

 {} 

“datos” en su código es la clave del objeto, luego el siguiente código no puede usar.

 { data: { name: data, callback: function (key, opt) { alert("Clicked on " + data); } } data: { name: data, callback: function (key, opt) { alert("Clicked on " + data); } } } 

¿Por qué quieres que uses loop?

Si quieres un menú contextual diferente tienes el mismo rol. Prueba esto.

 var dataObjectValue ={ name: data, callback: function (key, opt) { alert("Clicked on " + data); } }; var dataObjectForItems={}; for(var i=0; i<2; i++){ dataObjectForItems["data"+i]=dataObjectValue; } // result expected of dataObjectForItems //{ // data1: { name: data, callback: function (key, opt) { alert("Clicked on " + data); } } // data2: { name: data, callback: function (key, opt) { alert("Clicked on " + data); } } //} $('.context-menu-one').on('contextmenu', function(e){ var data = $("#strngTitle").text(); $.contextMenu({ selector: '.context-menu-one', items: dataObjectForItems }); }); 

Básicamente, no puedes construir un objeto en JavaScript de la forma en que lo intentas. Un for-loop no produce una matriz de valores, ni tampoco produce objetos. Lo que debe hacer es crear su objeto antes de pasarlo como un valor a la llamada de inicialización del menú contextual.

 var menuItems = {}; for (var i = 0; i < 2; i++) { var key = GenerateKey(i); var data = GenerateData(); menuItems[key] = data; }; $.contextMenu({ selector: '.context-menu-one', items: menuItems }); function GenerateKey(index) { return "data" + index; } function GenerateData(index) { return { name: index, callback: function (key, opt) { alert("Clicked on " + index); } }; }