Question

我有一个包含一些字符串的全局JavaScript数组。

我想根据JavaScript数组中的字符串创建动态列表。与此类似：

<ul class='xbreadcrumbs' style='position:absolute; bottom:0px'>
    <li>
        <a href='#'>String 1</a>
    </li>
</ul>

如何遍历我的数组，然后在JavaScript / jQuery中创建此列表？

Answer 1

如果您只需要一个平面数组（即不是多维数组且数组中没有数组），那么您可以在纯JavaScript中执行以下操作：

var strs = [ "String 1", "String 2", "String 3" ];
var list = document.createElement("ul");
for (var i in strs) {
  var anchor = document.createElement("a");
  anchor.href = "#";
  anchor.innerText = strs[i];

  var elem = document.createElement("li");
  elem.appendChild(anchor);
  list.appendChild(elem);
}

然后将list附加到您想要的身体中的任何父元素。

Answer 2

试试这个

var str = '<ul class='xbreadcrumbs' style='position:absolute; bottom:0px'>';

for(var i in $yourArray){
   str += '<li><a href="#">String 1</a></li>';
}

str += '</ul>';

$('body').append(str);

Answer 3

var $bread = $('ul.xbreadcrumbs');
$.each(yourArray, function(index, value) {
  $('<li><a href="#">' + value + '</a></li>')
    .appendTo($bread);
});

我没有测试过这个 - 就在我脑海中。希望这有帮助！

Answer 4

是的，你可以。您可以使用createElement直接使用DOM（请参阅Jonathan的回答），或使用jQuery（未经测试）使用非常简单的路径：

var ul = "<ul>";
for(var i=0; i < arr.length; i++) {
    ul += "<li><a href=\"#\">" + arr[i] + "</a></li>";
}
ul += "</ul>";

var ulElem = $(ul);

如何在JavaScript中动态创建无序列表？

4 个答案: