Comment générer une liste UL Li à partir d'un tableau de chaînes à l'aide de jquery?

Question

Comment générer une liste UL Li à partir d'un tableau de chaînes à l'aide de jquery?

Demandé el 4 de Mai, 2011: Quand la question a-t-elle été
123914 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'ai un tableau de chaînes comme

'États-Unis', 'Canada', 'Argentine', 'Arménie', 'Aruba', 'Australie', 'Autriche', 'Azerbaïdjan', 'Bahamas', 'Bangladesh', 'Biélorussie', 'Belgique'**, ... etc.

Je veux créer une liste dynamique à partir d'un tableau de chaînes comme ci-dessous :

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

Comment est-il possible d'utiliser jQuery ?

Demandé el 4 de Mai, 2011 par Abhishek Bhalani

Answer 1

5 Réponses

Answer 2

93voto

Sai Sherlekar Points 484

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

Répondu el 4 de Mai, 2011 par Sai Sherlekar (484 Points )

Answer 3

20voto

tokland Points 29813

Avec ES6, vous pouvez écrire ceci :

 const countries = ['United States', 'Canada', 'Argentina', 'Armenia'];

const $ul = $('<ul>', { class: "mylist" }).append(
  countries.map(country => 
    $("<li>").append($("<a>").text(country))
  )
);

Répondu el 17 de Décembre, 2015 par tokland (29813 Points )

Answer 4

14voto

SM Farhad Ali Points 944

Approche encore meilleure en utilisant la méthode de jointure du tableau

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

Répondu el 15 de Mars, 2015 par SM Farhad Ali (944 Points )

Answer 5

6voto

Mike Thomsen Points 12074

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

Répondu el 4 de Mai, 2011 par Mike Thomsen (12074 Points )

Answer 6

4voto

Sai Sherlekar Points 484

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

Répondu el 4 de Mai, 2011 par Sai Sherlekar (484 Points )

Comment générer une liste UL Li à partir d'un tableau de chaînes à l'aide de jquery?

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Comment générer une liste UL Li à partir d'un tableau de chaînes à l'aide de jquery?

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: