Comment ajouter des éléments à une liste non ordonnée en utilisant jquery
Dans ma réponse json, je veux la parcourir en utilisant $.chacun, puis ajoutez des éléments à un élément <ul></ul>.
$.each(data, function(i, item) {
// item.UserID
// item.Username
}
Je veux ajouter un
4 réponses
Le moyen le plus efficace est de créer un tableau et d'ajouter au dom une fois.
Vous pouvez le rendre encore meilleur en perdant tout le concat de chaîne de la chaîne. Poussez plusieurs fois dans le tableau ou construisez la chaîne en utilisant += , puis poussez, mais cela devient un peu plus difficile à lire pour certains.
Vous pouvez également envelopper tous les éléments d'un élément parent (dans ce cas, l'ul) et l'ajouter au conteneur pour de meilleures performances. Il suffit de pousser la '<ul>' et '</ul>' avant et après chaque et ajouter à un div.
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('') );
J'ai décidé de prendre 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 à m'inquiéter de m'échapper pour HTML et ce qui ne l'est pas.
Dans cet exemple, data contient un tableau d'objets, analysés à partir de JSON. Chaque objet du tableau a une propriété .title. J'utilise la fonction each de jQuery pour les parcourir.
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 sur le tableau items, mais avec le chaînage de méthode, je peux définir propriétés à l'avance, telles que .text.
J'ajoute ensuite le tableau d'objets à la liste <ul id="my_list"> en utilisant la méthode de Lars Gersmann.
Obtenez le <ul> en utilisant la syntaxe du sélecteur jQuery, puis appelez append:
$("ul#theList").append("<li><a href='url-here'>Link Text</a></li>");
Voir jQuery docs pour plus d'informations.
$.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);
}