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?
This question is related to
jquery
jquery-ui
jquery-selectors
javascript-framework
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);
});
It's possible without jQuery too! :)
let countries = ['United States', 'Canada', 'Argentina', 'Armenia', 'Aruba'];_x000D_
_x000D_
// The <ul> that we will add <li> elements to:_x000D_
let myList = document.querySelector('ul.mylist');_x000D_
_x000D_
// Loop over the Array of country names:_x000D_
countries.forEach(function(value, index, array) {_x000D_
// Create an <li> element:_x000D_
let li = document.createElement('li');_x000D_
_x000D_
// Give it the desired classes & attributes:_x000D_
li.classList.add('ui-menu-item');_x000D_
li.setAttribute('role', 'menuitem');_x000D_
_x000D_
// Now create an <a> element:_x000D_
let a = document.createElement('a');_x000D_
_x000D_
// Give it the desired classes & attributes:_x000D_
a.classList.add('ui-all');_x000D_
a.tabIndex = -1;_x000D_
a.innerText = value; // <--- the country name from our Array_x000D_
a.href = "#"_x000D_
_x000D_
// Now add the <a> to the <li>, and add the <li> to the <ul>_x000D_
li.appendChild(a);_x000D_
myList.appendChild(li);_x000D_
});<ul class="mylist"></ul>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);
});
Other variation of Abhishek Bhalani: You can use Array.map() instead of $.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);
});
With ES6 you can write this:
const countries = ['United States', 'Canada', 'Argentina', 'Armenia'];
const $ul = $('<ul>', { class: "mylist" }).append(
countries.map(country =>
$("<li>").append($("<a>").text(country))
)
);
<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>
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>';
Source: Stackoverflow.com