quitar - Cómo agregar elementos a una lista desordenada<ul> usando jquery

lista de productos javascript

Question

En mi respuesta json, quiero recorrerla utilizando $ .each y luego agregar elementos a un elemento <ul></ul> .

 $.each(data, function(i, item) {
// item.UserID
// item.Username
}

Quiero añadir un

y crea una etiqueta href que enlaza con la página de usuarios.

Answer 1

Decidí tomar la excelente respuesta de Redsquare y mejorarla un poco. En lugar de agregar HTML, prefiero agregar objetos jQuery. De esa manera, no tengo que preocuparme por escapar a HTML y qué no.

En este ejemplo, los data contienen una matriz de objetos, analizados desde JSON. Cada objeto en la matriz tiene una propiedad .title . Uso jQuery each función para recorrerlos.

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

Presiono un nuevo objeto jQuery en la matriz de elementos, pero con el encadenamiento de métodos puedo establecer propiedades con anticipación, como .text .

Luego agrego la matriz de objetos a la lista <ul id="my_list"> usando el método de Lars Gersmann .

Answer 2

La forma más eficiente es crear una matriz y anexarla a la dom una vez.

Puedes hacerlo aún mejor si pierdes toda la cadena concat de la cadena. Empuje varias veces a la matriz o construya la cadena usando + = y luego presione pero se vuelve un poco más difícil de leer para algunos.

También puede envolver todos los elementos en un elemento padre (en este caso, la ul) y adjuntarlos al contenedor para obtener el mejor rendimiento. Simplemente presione '' <ul>'' y ''</ul>'' antes y después de cada uno y añádalos a 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('''') );

Answer 3

Obtenga el <ul> usando la sintaxis del selector jQuery y luego llame al append :

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

Ver documentos de jQuery para más información.

Answer 4

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