Jak mogę dynamicznie utworzyć listę nieuporządkowaną w JavaScript?

Question

Mam globalną tablicę JavaScript, która zawiera niektóre ciągi.

Chcę utworzyć dynamiczną listę na podstawie ciągów w mojej tablicy JavaScript. Podobny do tego:

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

Jak mogę iterować po mojej tablicy, a następnie utworzyć tę listę w JavaScript/jQuery?

Answer 1

Spróbuj

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 2

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

Nie testowałem tego - tuż przy mojej głowie. Mam nadzieję że to pomoże!

Answer 3

Tak, można. Można użytkownik DOM bezpośrednio z createElement (patrz odpowiedź Jonathana), lub udać się bardzo łatwe trasy z jQuery (nie testowane):

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

var ulElem = $(ul); 

Answer 4

Jeśli potrzebujesz tylko płaską tablicę (czyli nie wielowymiarowy i nie macierze w tablicy), a następnie można wykonać następujące czynności w czystym 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); 
} 

następnie dołączyć list rzecz tego elementu nadrzędnego w organizmie pragnienie.