¿Cómo generar una lista UL Li a partir de una matriz de cadenas utilizando jquery?

tengo matriz de cadenas como¿Cómo generar una lista UL Li a partir de una matriz de cadenas utilizando jquery?

'Estados Unidos', 'Canadá', 'Argentina', 'Armenia', 'Aruba, 'Australia', 'Austria', 'Azerbaiyán', «Bahamas , 'Bangladesh', 'Bielorrusia', 'Bélgica' **, etc ...

Quiero crear una lista dinámica de la matriz de cadenas, como a continuación: -

<ul class="mylist" style="z-index: 1; top: 474px; left: 228px; display: none; width: 324px;" > 
    <li class="ui-menu-item" role="menuitem"> 
    <a class="ui-all" tabindex="-1"> 
     United States 
    </a> 
    </li> 
    <li class="ui-menu-item" role="menuitem"> 
    <a class="ui-all" tabindex="-1"> 
     Canada 
    </a> 
    </li> 
    <li> .... </li> 
    ..... 
</ul>

¿Cómo es posible usando jQuery?

Fuente

2011-05-04 Abhishek B.

var countries = ['United States', 'Canada', 'Argentina', 'Armenia']; 
var cList = $('ul.mylist') 
$.each(countries, function(i) 
{ 
    var li = $('<li/>') 
     .addClass('ui-menu-item') 
     .attr('role', 'menuitem') 
     .appendTo(cList); 
    var aaa = $('<a/>') 
     .addClass('ui-all') 
     .text(countries[i]) 
     .appendTo(li); 
});

Fuente

2011-05-04 09:43:03

Muchas gracias @Sai ... –

var countries = ['United States', 'Canada', 'Argentina', 'Armenia']; 
var cList = $('ul.mylist') 
$.each(countries, function(i) { 
    var li = $('<li/>') 
     .addClass('ui-menu-item') 
     .attr('role', 'menuitem') 
     .appendTo(cList); 
    var a = $('<a/>') 
     .addClass('ui-all') 
     .text(this) 
     .appendTo(li); 
});

Fuente

2011-05-04 09:14:28

Gracias, lo que consigue el mensaje de error no está definida una en javascript jquery, estoy usando jQuery 1.5.1. Cómo arreglarlo? –

Cambie a la versión de desarrollo de jQuery. Eso te mostrará dónde está fallando. –

<script type="text/javascript" > 
     function aa() 
     { 
      var YourArray = ['United States', 'Canada', 'Argentina', 'Armenia']; 
      var ObjUl = $('<ul></ul>'); 
      for (i = 0; i < YourArray.length; i++) 
      { 
       var Objli = $('<li></li>'); 
       var Obja = $('<a></a>'); 

       ObjUl.addClass("ui-menu-item"); 
       ObjUl.attr("role", "menuitem"); 

       Obja.addClass("ui-all"); 
       Obja.attr("tabindex", "-1"); 

       Obja.text(YourArray[i]); 
       Objli.append(Obja); 

       ObjUl.append(Objli); 
      } 
      $('.DivSai').append(ObjUl); 
     } 
    </script> 
</head> 
<body onload="aa()"> 
    <form id="form1" runat="server"> 
    <div class="DivSai" > 

    </div> 
    </form> 
</body>

Fuente

2011-05-04 09:19:33

Aún mejor enfoque utilizando la matriz unirse a método

var countries = ['United States', 'Canada', 'Argentina', 'Armenia']; 
var list = '<ul class="myList"><li class="ui-menu-item" role="menuitem"><a class="ui-all" tabindex="-1">' + countries.join('</a></li><li>') + '</li></ul>';

Fuente

2015-03-15 18:40:21

Con ES6 puede escribir esto (voy a omitir algunos atributos HTML para evitar el ruido):

const countries = ['United States', 'Canada', 'Argentina', 'Armenia']; 
const $ul = $('<ul>', {class: "mylist"}).append(
    countries.map(country => 
    $("<li>").append($("<a>").text(country)) 
) 
);

Fuente

2015-12-17 13:05:22 tokland

sugerir también funciona. gracias por el resultado en línea corta. cómo se puede agregar una nueva clase "mylist" a la lista UL –

Otras var iation de Abhishek Bhalani: Usted puede utilizar Array.map() en lugar de $ each()

var items = ['United States', 'Canada', 'Argentina', 'Armenia']; 
var cList = $('ul.mylist'); 
items.map((item,i) => { 
     var li = $('<li/>') 
     .addClass('ui-menu-item') 
     .attr('role', 'menuitem') 
     .appendTo(listWrapper); 
     var aaa = $('<a/>') 
     .addClass('ui-all') 
     .text(i + ': ' + item.name) 
     .appendTo(li); 
    });

Fuente

2016-04-27 10:24:06

¿Cómo generar una lista UL Li a partir de una matriz de cadenas utilizando jquery?

Respuesta

Cuestiones relacionadas