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

【问题标题】：How to generate UL Li list from string array using jquery?如何使用 jquery 从字符串数组生成 UL Li 列表？
【发布时间】：2011-08-18 08:54:36
【问题描述】：

我有像

这样的字符串数组

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

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

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

【问题讨论】：

标签： jquery jquery-ui jquery-selectors javascript-framework

【解决方案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);
});

【讨论】：

使用 vanilla js 的 .forEach() 有什么区别？

【解决方案2】：

使用 ES6 你可以这样写：

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

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

【讨论】：

你建议也可以。感谢短线的结果。如何将新类“mylist”添加到 UL 列表

【解决方案3】：

使用数组的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>';

【讨论】：

如果更好是指更短，那么更好。但不是那么容易理解。
开始<a> 和结束</a> 标签不匹配。您需要在join() 参数中打开<a ...>。

【解决方案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);
});

【讨论】：

谢谢，我收到错误消息 a is undefined in jquery javascript，我使用的是 jquery 1.5.1。如何解决？
切换到jQuery的开发版本。这会告诉你哪里出了问题。

【解决方案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】：

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

【讨论】：

【解决方案7】：

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

&lt;ul class="mylist"&gt;&lt;/ul&gt;

【讨论】：