如何使用jquery从字符串数组中生成UL Li列表？

'美国'， '加拿大'， '阿根廷'， '亚美尼亚'， '阿鲁巴'， '澳大利亚'， '奥地利'， '阿'， '巴哈马' '孟加拉国'， '白俄罗斯'，“比利时**，...等

我想创建一个从字符串数组的动态列表如下图所示： -

<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>

怎么回事可能使用jQuery？

来源

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

来源

2011-05-04 09:43:03

非常感谢@Sai ... – 2011-05-04 10:13:49

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

来源

2011-05-04 09:14:28

谢谢，我得到错误信息使用jQuery JavaScript是不确定的，我使用jQuery 1.5.1。如何修复它？ – 2011-05-04 09:20:52

切换到jQuery的开发版本。这会告诉你它失败的地方。 – 2011-05-04 12:29:43

<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>

来源

2011-05-04 09:19:33

更好的方法使用数组的加入方法

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>';

来源

2015-03-15 18:40:21

随着ES6你可以写这个（我会跳过一些HTML属性，以避免噪声）：

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

来源

2015-12-17 13:05:22 tokland

你的建议也适用。感谢结果在短线。如何将新类“mylist”添加到UL列表 – 2015-12-22 10:25:39

其他变种的Abhishek Bhalani iation：您可以使用Array.map（）代替$。每（）

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

来源

2016-04-27 10:24:06

如何使用jquery从字符串数组中生成UL Li列表？

回答

相关问题