Comment ajouter des éléments à une liste non ordonnée <ul> en utilisant jquery.

Question

Dans ma réponse json, je veux la parcourir en boucle à l'aide de $.each, puis ajouter des éléments à un fichier de type "json". <ul></ul> élément.

    $.each(data, function(i, item) {

        // item.UserID
        // item.Username

     }

Je veux ajouter un

• et créez une balise href qui renvoie à la page des utilisateurs.

Answer 1

La méthode la plus efficace consiste à créer un tableau et à l'ajouter au domaine une fois.

Vous pouvez encore l'améliorer en supprimant toutes les concaténations de la chaîne de caractères. Vous pouvez soit pousser plusieurs fois dans le tableau, soit construire la chaîne en utilisant += et ensuite pousser, mais cela devient un peu plus difficile à lire pour certains.

Vous pouvez également envelopper tous les éléments dans un élément parent (dans ce cas, le ul) et l'ajouter au conteneur pour obtenir de meilleures performances. Il suffit de pousser l'élément ' <ul>' et '</ul>' avant et après le "each" et l'ajouter à un "div".

data = [
{
  "userId": 1,
  "Username": "User_1"
},
{
  "userId": 2,
  "Username": "User_2"
}
];

var items = [];

$.each(data, function(i, item) {

  items.push('<li><a href="yourlink?id=' + item.UserID + '">' + item.Username + '</a></li>');

}); // close each()

$('#yourUl').append(items.join(''));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="yourUl">
</ul>

Answer 2

J'ai décidé de reprendre l'excellente réponse de Redsquare et de l'améliorer un peu. Plutôt que d'ajouter du HTML, je préfère ajouter des objets jQuery. De cette façon, je n'ai pas à me soucier de l'échappement pour le HTML et tout le reste.

Dans cet exemple, data contient un tableau d'objets, analysé à partir de JSON. Chaque objet du tableau a un .title propriété. J'utilise la méthode de jQuery each pour les parcourir en boucle.

var items=[];
$(data).each(function(index, Element) {
    items.push($('<li/>').text(Element.title));
});
$('#my_list').append.apply($('#my_list'), items);

Je pousse un nouvel objet jQuery dans le tableau des éléments, mais avec le chaînage des méthodes, je peux définir les propriétés à l'avance, comme par exemple .text .

J'ajoute ensuite le tableau d'objets à la liste <ul id="my_list"> en utilisant La méthode de Lars Gersmann .

Answer 3

Obtenez le <ul> en utilisant la syntaxe du sélecteur jQuery, puis appeler append :

$("ul#theList").append("<li><a href='url-here'>Link Text</a></li>");

Voir Documentation sur jQuery pour plus d'informations.

Answer 4

$.each(data, function (i, item) {
    $('ul').append('<li><a href="yourlink?id=' + item.UserID + '">' + item.Username + '</a></li>');
});

Answer 5

$.each(data, function(i, item) {

       var li = $("<li><a></a></li>");

       $("#yourul").append(li);

       $("a",li).text(item.Username);
       $("a",li).attr("href", "http://example.com" + item.UserID);

    }