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

Question

我有字符串数组

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

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

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

Answer 1

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

Answer 2

使用数组的连接方法更好的方法

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

Answer 3

使用ES6,您可以编写此内容(跳过一些HTML属性以避免不必要的噪音):

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

const $ul = $('<ul>', {class: "mylist"}).append(
  countries.map(country => 
    $("<li>").append($("<a>").text(country))
  )
);

Answer 4

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