How to generate UL Li list from string array using jquery?

Question

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?

andyb · Accepted Answer · 2011-05-04 11:31:53Z

95

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

edited May 4, 2011 at 11:31

andyb

43.9k12 gold badges126 silver badges155 bronze badges

answered May 4, 2011 at 9:43

Sai Sherlekar

1,8542 gold badges17 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Zaffer Over a year ago

What the difference here to using vanilla js's .forEach() ?

tokland · Accepted Answer · 2021-01-20 09:29:29Z

22

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

edited Jan 20, 2021 at 9:29

answered Dec 17, 2015 at 13:05

tokland

68.2k13 gold badges151 silver badges174 bronze badges

1 Comment

Abhishek B. Over a year ago

you suggest also works. thanks for result in short line. how can add new class "mylist" to UL list

SM Farhad Ali · Accepted Answer · 2022-05-01 02:25:42Z

14

An even better approach using the array's join method

const countries = ['United States', 'Canada', 'Argentina', 'Armenia'];
const list = '<ul class="myList"><li class="ui-menu-item" role="menuitem"><a class="ui-all" tabindex="-1">' + countries.join('</a></li><li class="ui-menu-item" role="menuitem"><a class="ui-all" tabindex="-1">') + '</a></li></ul>';

edited May 1, 2022 at 2:25

answered Mar 15, 2015 at 18:40

SM Farhad Ali

1,1052 gold badges12 silver badges31 bronze badges

2 Comments

Zaffer Over a year ago

if by better you mean shorter, then yes better. but not as simple to comprehend.

Matt Over a year ago

The opening <a> and closing </a> tags are unmatched. You need an opening <a ...> in the join() parameter.

Mike Thomsen · Accepted Answer · 2011-05-04 09:14:28Z

6

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

answered May 4, 2011 at 9:14

Mike Thomsen

37.7k11 gold badges63 silver badges86 bronze badges

2 Comments

Abhishek B. Over a year ago

Thanks , I getting error message a is undefined in jquery javascript, I am using jquery 1.5.1. How to fixed it?

Mike Thomsen Over a year ago

Switch over to the development version of jQuery. That'll show you where it's failing.

Sai Sherlekar · Accepted Answer · 2011-05-04 09:29:07Z

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

Pavlo Oliinyk · Accepted Answer · 2018-12-07 09:49:33Z

2

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

edited Dec 7, 2018 at 9:49

answered Apr 27, 2016 at 10:24

Pavlo Oliinyk

4905 silver badges11 bronze badges

Comments

Josh Withee · Accepted Answer · 2019-06-24 02:51:28Z

It's possible without jQuery too! :)

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

<ul class="mylist"></ul>

Collectives™ on Stack Overflow

How to generate UL Li list from string array using jquery?

7 Answers 7

1 Comment

1 Comment

2 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

1 Comment

2 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related