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

我有像这样的字符串数组

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

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

• United States

• Canada

• ....

.....

如何使用jQuery？

7个解决方案

85 votes

var countries = ['United States', 'Canada', 'Argentina', 'Armenia'];

var cList = $('ul.mylist')

$.each(countries, function(i)

{

var li = $('

')

.addClass('ui-menu-item')

.attr('role', 'menuitem')

.appendTo(cList);

var aaa = $('')

.addClass('ui-all')

.text(countries[i])

.appendTo(li);

});

Sai Sherlekar answered 2020-08-10T19:13:28Z

13 votes

使用数组的join方法甚至更好的方法

var countries = ['United States', 'Canada', 'Argentina', 'Armenia'];

var list = '

• ' + countries.join('
• ') + '

';

SM Farhad Ali answered 2020-08-10T19:13:47Z

9 votes

使用ES6，您可以编写以下代码(跳过一些HTML属性以避免不必要的干扰)：

const countries = ['United States', 'Canada', 'Argentina', 'Armenia'];

const $ul = $('

• ', {class: "mylist"}).append(

countries.map(country =>

$("

").append($("").text(country))

)

);

tokland answered 2020-08-10T19:14:07Z

5 votes

var countries = ['United States', 'Canada', 'Argentina', 'Armenia'];

var cList = $('ul.mylist')

$.each(countries, function(i) {

var li = $('

')

.addClass('ui-menu-item')

.attr('role', 'menuitem')

.appendTo(cList);

var a = $('')

.addClass('ui-all')

.text( this )

.appendTo(li);

});

Mike Thomsen answered 2020-08-10T19:14:23Z

4 votes

function aa()

{

var YourArray = ['United States', 'Canada', 'Argentina', 'Armenia'];

var ObjUl = $('

for (i = 0; i < YourArray.length; i++)

{

var Objli = $('

');

var Obja = $('');

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

}

Sai Sherlekar answered 2020-08-10T19:14:38Z

2 votes

Abhishek Bhalani的其他变化：您可以使用Array.map()代替$ .each()

var items = ['United States', 'Canada', 'Argentina', 'Armenia'];

var cList = $('ul.mylist');

items.map( (item,i ) => {

var li = $('

')

.addClass('ui-menu-item')

.attr('role', 'menuitem')

.appendTo(cList);

$('')

.appendTo(li);

});

Pasha Oleynik answered 2020-08-10T19:14:58Z

0 votes

也可以不使用jQuery！ :)

Josh Withee answered 2020-08-10T19:15:18Z