如何使用jquery从string数组中生成UL Li列表？
我有像string数组
“美国”“加拿大”“阿根廷”“亚美尼亚”“阿鲁巴”“澳大利亚”“奥地利”“阿塞拜疆”“巴哈马”“孟加拉国”“白俄罗斯”“比利时”** ，…等
我想创build一个像下面的string数组的dynamic列表： –
<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？
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); });
更好的方法使用数组的连接方法
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>';
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); });
使用ES6，您可以编写（让我们跳过额外的HTML属性来避免噪音）：
var countries = ['United States', 'Canada', 'Argentina', 'Armenia']; var $ul = $('<ul>') .addClass("mylist") .append(countries.map(country => $("<li>").append($("<a>").text(country))));
<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>
Abhishek Bhalani其他变体：您可以使用Array.map（）而不是$ .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); });
