Mostrar todos los elementos en la matriz usando jquery

Question

Tengo una matriz que quiero que se muestre en html .. No quiero escribir varias líneas para publicar cada elemento en la matriz, pero todas deben ser exactamente iguales. es decir,

var array = []; 
//code that fills the array.. 
$('.element').html('<span>'+array+'</span>'); 

Lo que quiero aquí es crear un lapso para cada elemento de la matriz.

Answer 1

Puede hacerlo de esta manera por iteración a través de la matriz en un bucle, acumulando el nuevo HTML en su propia matriz y luego unirse al HTML todos juntos e insertándolo en el DOM al final:

var array = [...]; 
var newHTML = []; 
for (var i = 0; i < array.length; i++) { 
    newHTML.push('<span>' + array[i] + '</span>'); 
} 
$(".element").html(newHTML.join("")); 

Algunas personas prefieren utilizar .each() método en lugar del bucle for de jQuery que funcionaría así:

var array = [...]; 
var newHTML = []; 
$.each(array, function(index, value) { 
    newHTML.push('<span>' + value + '</span>'); 
}); 
$(".element").html(newHTML.join("")); 

O porque la salida de la iteración matriz es en sí una matriz con un elemento derivado de cada elemento de la fre matriz final, jQuery de .map se puede utilizar como esto:

var array = [...]; 
var newHTML = $.map(array, function(value) { 
    return('<span>' + value + '</span>'); 
}); 
$(".element").html(newHTML.join("")); 

que se debe utilizar es una elección personal, dependiendo de su estilo de codificación preferido, la sensibilidad al rendimiento y la familiaridad con .map(). Supongo que el bucle for sería el más rápido, ya que tiene menos llamadas de función, pero si el rendimiento fuera el criterio principal, entonces tendría que comparar las opciones para medir realmente.

FYI, en las tres opciones, el HTML se acumula en una matriz, luego se unen al final y se insertan en el DOM a la vez. Esto se debe a que las operaciones DOM suelen ser la parte más lenta de una operación como esta, por lo que es mejor minimizar el número de operaciones DOM por separado. Los resultados se acumulan en una matriz porque agregar elementos a una matriz y luego unirlos al final suele ser más rápido que agregar cadenas a medida que avanza.

---

Y, si se puede vivir con IE9 o por encima (o instalar un polyfill ES5 para .map()), puede utilizar la versión de serie de .map así:

var array = [...]; 
$(".element").html(array.map(function(value) { 
    return('<span>' + value + '</span>'); 
}).join("")); 

Nota: esta versión también se deshace de la variable intermedia newHTML en aras de la compacidad.

Answer 2

for (var i = 0; i < array.length; i++) { 
    $(".element").append('<span>' + array[i] + '</span>'); 
} 

Answer 3

Uso ningún ejemplo de que no lo introduzca cada elemento uno a la vez, una inserción es más eficiente

$('.element').html('<span>' + array.join('</span><span>')+'</span>'); 

Answer 4

Se debe utilizar para este $.map:

var array = ["one", "two", "three"]; 

var el = $.map(array, function(val, i) { 
    return "<span>" + val + "</span>"; 
}); 

$(".element").html(el.join("")); 

jsFiddle demo

Answer 5

Rápido y fácil.

$.each(array, function(index, value){ 
    $('.element').html($('.element').html() + '<span>' + value +'</span>') 
}); 

Answer 6

aquí está la solución, se crea un campo de texto en dinámico añadir nuevos elementos en orden mi código html es

<input type="text" id="name"> 
 
\t <input type="button" id="btn" value="Button"> 
 
\t \t <div id="names"> 
 
\t \t </div>

ahora escriba cualquier cosa en el campo de texto y haga clic en el botón esto agregará el elemento en la matriz y llamará a la función dispaly_arry

$(document).ready(function() 
 
{ \t \t 
 
\t function display_array() 
 
\t { 
 
\t \t $("#names").text(''); 
 
\t \t $.each(names,function(index,value) 
 
\t \t { 
 
\t \t $('#names').append(value + '<br/>'); 
 
\t \t }); 
 
\t } 
 
\t 
 
\t var names = ['Alex','Billi','Dale']; 
 
\t display_array(); 
 
\t $('#btn').click(function() 
 
\t { 
 
\t \t var name = $('#name').val(); 
 
\t \t names.push(name);// appending value to arry 
 
\t \t display_array(); 
 
\t \t 
 
\t }); 
 
\t 
 
}); 
 
\t

mostrando elementos de la matriz en div, puede utilizar lapso pero para utilizar esta solución mismo id.!