web-dev-qa-db-fra.com

Afficher tous les éléments du tableau en utilisant jquery

J'ai un tableau que je veux avoir affiché en html ... Je ne veux pas écrire plusieurs lignes pour poster chaque élément du tableau, mais tous doivent être exactement les mêmes c'est à dire

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

ce que je veux ici, c'est créer une étendue pour chaque élément du tableau.

jqueryhtmlarrays
14
captainrad

Vous pouvez le faire comme ceci en parcourant le tableau dans une boucle, en accumulant le nouveau code HTML dans son propre tableau, puis en joignant le code HTML au complet et en l'insérant dans le DOM à la fin:

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

Certaines personnes préfèrent utiliser la méthode .each() de jQuery à la place de la boucle for qui fonctionnerait comme suit:

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

Ou parce que la sortie de l'itération du tableau est elle-même un tableau avec un élément dérivé de chaque élément du tableau d'origine, le .map de jQuery peut être utilisé comme ceci:

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

Ce que vous devez utiliser est un choix personnel en fonction de votre style de codage préféré, de votre sensibilité à la performance et de votre familiarité avec .map(). Mon hypothèse est que la boucle for serait la plus rapide car elle comporte moins d'appels de fonction, mais si la performance était le critère principal, vous devrez alors comparer les options à mesurer.

Pour votre information, dans ces trois options, le code HTML est accumulé dans un tableau, puis joint à la fin et inséré dans le DOM en une seule fois. En effet, les opérations DOM étant généralement la partie la plus lente d'une opération de ce type, il est donc préférable de minimiser le nombre d'opérations DOM distinctes. Les résultats sont accumulés dans un tableau car l'ajout d'éléments à un tableau, puis leur réunion à la fin est généralement plus rapide que l'ajout de chaînes au fur et à mesure.

Et, si vous pouvez utiliser IE9 ou une version ultérieure (ou installer un polyfill ES5 pour .map()), vous pouvez utiliser la version tableau de .map comme ceci:

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

Remarque: cette version supprime également la variable intermédiaire newHTML dans un souci de compacité.

41
jfriend00

Utilisez des exemples qui n'insèrent pas chaque élément un à la fois, une insertion est la plus efficace

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

Rapide et facile.

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

Vous devriez utiliser $.map pour ceci: 

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

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

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

jsFiddle demo

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

voici la solution, je crée un champ de texte pour ajouter dynamiquement de nouveaux éléments dans un tableau mon code html est 

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

maintenant, tapez quelque chose dans le champ de texte et cliquez sur le bouton cela ajoutera un élément sur le tableau et appellera la fonction

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

si vous montrez des éléments de tableau dans div, vous pouvez utiliser span, mais pour cette solution, utilisez le même identifiant.!

0
Mohsin Shoukat