如何使用 jquery 从字符串数组生成 UL Li 列表？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5881033/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to generate UL Li list from string array using jquery?
提问by Abhishek B.
I have string array like
我有像这样的字符串数组
'United States', 'Canada', 'Argentina', 'Armenia', 'Aruba', 'Australia', 'Austria', 'Azerbaijan', 'Bahamas', 'Bangladesh', 'Belarus', 'Belgium'**, ... etc.
“美国”、“加拿大”、“阿根廷”、“亚美尼亚”、“阿鲁巴”、“澳大利亚”、“奥地利”、“阿塞拜疆”、“巴哈马”、“孟加拉国”、“白俄罗斯”、“比利时”** ， ... 等等。
I want create a dynamic list from string array like below:-
我想从字符串数组创建一个动态列表，如下所示：-
<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>
How is it possible using jQuery?
怎么可能使用jQuery？
回答by Sai Sherlekar
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);
});
回答by tokland
With ES6 you can write this:
使用 ES6 你可以这样写：
const countries = ['United States', 'Canada', 'Argentina', 'Armenia'];
const $ul = $('<ul>', {class: "mylist"}).append(
countries.map(country =>
$("<li>").append($("<a>").text(country))
)
);
回答by SM Farhad Ali
Even better approach using array's joinmethod
使用数组的join方法的更好方法
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>';
回答by Mike Thomsen
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);
});
回答by Sai Sherlekar
<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>
回答by Pasha Oleynik
Other variation of Abhishek Bhalani: You can use Array.map() instead of $.each()
其他变体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(cList);
$('<a class="ui-all">'+ i + ': ' + item.name + '<a/>')
.appendTo(li);
});
回答by Josh Withee
It's possible without jQuery too! :)
没有 jQuery 也是可能的！:)
let countries = ['United States', 'Canada', 'Argentina', 'Armenia', 'Aruba'];
// The <ul> that we will add <li> elements to:
let myList = document.querySelector('ul.mylist');
// Loop over the Array of country names:
countries.forEach(function(value, index, array) {
// Create an <li> element:
let li = document.createElement('li');
// Give it the desired classes & attributes:
li.classList.add('ui-menu-item');
li.setAttribute('role', 'menuitem');
// Now create an <a> element:
let a = document.createElement('a');
// Give it the desired classes & attributes:
a.classList.add('ui-all');
a.tabIndex = -1;
a.innerText = value; // <--- the country name from our Array
a.href = "#"
// Now add the <a> to the <li>, and add the <li> to the <ul>
li.appendChild(a);
myList.appendChild(li);
});<ul class="mylist"></ul>