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

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？

6 个解决方案

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

#2

Even better approach using array's join method

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

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

#3

With ES6 you can write this (I'll skip some HTML attributes to avoid noise):

使用ES6，你可以写这个（我会跳过一些HTML属性来避免噪音）：

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

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

#5

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

#6

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(listWrapper);
      var aaa = $('<a/>')
        .addClass('ui-all')
        .text(i + ': ' + item.name)
        .appendTo(li);
    });

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

#2