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

前端 未结 7 1144
盖世英雄少女心
盖世英雄少女心 2020-12-04 19:25

I have string array like

\'United States\', \'Canada\', \'Argentina\', \'Armenia\', \'Aruba\', \'Australia\', \'Austria\', \'Azerbaijan\', \'Bahama

相关标签:
7条回答
  • 2020-12-04 19:46
    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);
    });
    
    0 讨论(0)
  • 2020-12-04 19:49

    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>

    0 讨论(0)
  • 2020-12-04 19:51
    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);
    });
    
    0 讨论(0)
  • 2020-12-04 19:55

    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))
      )
    );
    
    0 讨论(0)
  • 2020-12-04 20:00

    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>';
    
    0 讨论(0)
  • 2020-12-04 20:00
        <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>
    
    0 讨论(0)
提交回复
热议问题