Visualizza tutti gli elementi nell'array utilizzando jquery

Question

Ho un array che voglio avere visualizzato in html .. Non voglio scrivere più righe per postare ogni elemento nell'array ma tutto dovrebbe essere esattamente lo stesso. ie

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

quello che voglio qui è quello di creare un intervallo per ogni elemento nella matrice.

Answer 1

Si può fare in questo modo scorrendo l'array in un ciclo, accumulando il nuovo HTML in esso la propria matrice e poi unire il codice HTML tutti insieme e inserendolo nel DOM alla fine:

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

Alcune persone preferiscono utilizzare .each() il metodo di jQuery al posto del ciclo for che avrebbe funzionato in questo modo:

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

O perché l'uscita dell'iterazione matrice stessa è un array con un elemento derivato da ciascun elemento della origi serie finale, jQuery di .map può essere utilizzato in questo modo:

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

Quale si dovrebbe utilizzare è una scelta personale a seconda del vostro stile di codifica preferito, la sensibilità per le prestazioni e la familiarità con .map(). La mia ipotesi è che il ciclo for sia il più veloce dal momento che ha meno chiamate di funzione, ma se le prestazioni fossero i criteri principali, sarebbe necessario confrontare le opzioni per misurare effettivamente.

FYI, in tutte e tre queste opzioni, l'HTML viene accumulato in un array, quindi unito insieme alla fine e inserito nel DOM tutto in una volta. Questo perché le operazioni DOM sono solitamente la parte più lenta di un'operazione come questa, quindi è meglio ridurre al minimo il numero di operazioni DOM separate. I risultati vengono accumulati in un array perché aggiungere elementi a un array e quindi unirli alla fine è in genere più veloce dell'aggiunta di stringhe man mano che si procede.

---

E, se si può vivere con IE9 o superiore (o installare un polyfill ES5 per .map()), è possibile utilizzare la versione matrice di .map come questo:

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

Nota: questa versione anche elimina la variabile intermedia newHTML nell'interesse della compattezza.

Answer 2

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

Answer 3

utilizzare alcun esempi che non inserire ogni elemento uno alla volta, uno di inserimento è più efficiente

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

Answer 4

Si dovrebbe usare $.map per questo:

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

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

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

jsFiddle demo

Answer 5

Semplice e veloce.

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

Answer 6

qui è la soluzione, creo un campo di testo dinamico aggiungere nuovi elementi in ordine di mio codice html è

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

ora digitare qualsiasi cosa in campo di testo e fare clic su sul pulsante questo aggiungerà l'elemento all'array e richiamerà la funzione 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

che mostra gli elementi dell'array in div, è possibile utilizzare arco, ma per questa soluzione usare lo stesso ID.!