Afficher tous les éléments dans le tableau à l'aide de jquery
J'ai un tableau que je veux avoir affiché en html..
Je ne veux pas écrire plusieurs lignes pour l'affichage de chaque élément d'un tableau, mais tous devraient être exactement les mêmes. ie
var array = [];
//code that fills the array..
$('.element').html('<span>'+array+'</span>');
ce que je veux, ici, est de créer une plage pour chaque élément d'un tableau.
tableau.join(',');
OriginalL'auteur captainrad | 2012-03-02
Vous devez vous connecter pour publier un commentaire.
Vous pouvez le faire comme ceci en parcourant le tableau dans une boucle, en accumulant le nouveau code HTML dans le tableau, puis de rejoindre le HTML, tous ensemble, et de l'insérer dans le DOM à la fin:
Certaines personnes préfèrent utiliser du jQuery
.each()
méthode au lieu de lafor
boucle qui fonctionne comme ceci:Ou parce que la sortie de la matrice d'itération est lui-même un tableau avec un élément dérivé à partir de chaque élément dans le tableau d'origine, jQuery
.map
peut être utilisée comme ceci:Que vous devez utiliser est un choix personnel en fonction de votre choix style de codage, la sensibilité à la performance et à la familiarité avec
.map()
. Ma conjecture est que lefor
boucle serait la manière la plus rapide car il a moins d'appels de fonction, mais si la performance est le critère principal, alors que vous auriez à comparer les options pour réellement mesurer.Pour info, dans chacun de ces trois options, le HTML est accumulé dans un tableau, puis se sont réunis à la fin et le insérée dans les DOM tous à la fois. C'est parce que DOM opérations sont généralement la partie la plus lente d'une telle opération il est donc préférable de réduire le nombre de séparer les DOM opérations. Les résultats sont accumulés dans un tableau en raison de l'ajout d'éléments à un tableau et ensuite de les rejoindre à la fin est généralement plus rapide que l'ajout de chaînes que vous allez.
Et, si vous pouvez vivre avec IE9 ou au-dessus (ou d'installer un ES5 polyfill pour
.map()
), vous pouvez utiliser le tableau de la version de.map
comme ceci:Remarque: cette version se débarrasse aussi de la
newHTML
variable intermédiaire dans l'intérêt de la compacité.array.map()
version.OriginalL'auteur jfriend00
Utiliser des exemples qui ne l'insérez pas chaque élément un à la fois, un point d'insertion est le plus efficace
OriginalL'auteur charlietfl
Rapide et facile.
array.forEach(function(value) { document.querySelector('.element').innerHTML += '<span>' + value + '</span>'; });
OriginalL'auteur T.CK
var $element = $('.element')
dans une variable avant la boucle. Cela permettrait d'éviter la création d'un nouvel objet jQuery dans chaque itération de la boucle. Aussi, appelant ajouter à chaque itération de la boucle n'est pas très performant. Les solutions que de créer une chaîne et de mettre à jour le DOM avec un seul appel sont beaucoup plus performants.Ou de ne pas utiliser jQuery à l'ensemble des cours. Seuls les OP de savoir si c'est nécessaire ou juste une optimisation prématurée.
OriginalL'auteur trapper
Vous devez utiliser
$.map
pour cela:jsFiddle démo
OriginalL'auteur Chris Abrams