JQuery ajouter tableau de la valeur à chaque élément de la liste

J'ai une liste non ordonnée comme ceci:

<ul id="names-list">
 <li></li>
 <li></li>
 <li></li>
 <li></li>
</ul>

Permet de dire que je veux ajouter un nom de cette liste pour chacun des <li> éléments:

var names = [ "Jon", "Nick", "Bill", "Tom" ];

Et mon code ressemble à ceci:

$('#names-list li').each(function () {
 $(this).append(names);
});

Mais depuis quelque raison il ne fonctionne pas. Quelqu'un peut me dire ce que je fais mal? Merci.

OriginalL'auteur Maverick | 2012-03-21

  1. 11

    La méthode each() a un "index" argument. L'utiliser pour obtenir la bonne valeur dans votre liste.

    var names = [ "Jon", "Nick", "Bill", "Tom" ];
$('#names-list li').each(function (index) {
    $(this).text(names[index]);
});

    Démonstration: http://jsfiddle.net/7ESKh/

    OriginalL'auteur Julien Lafont

  2. 15

    Pourquoi personne n'a souligné que fonder le nombre de li sur le nombre de vide li dans le dom est une horrible façon de le faire? C'est beaucoup mieux pour générer le li est basé sur le nombre d'éléments dans le tableau.

    Essayez plutôt ceci:

    HTML

    <div id="parent">
    <ul id="names-list">
        <!-- empty list -->
    </ul>
</div>

    JS

    var names = [ "Jon", "Nick", "Bill", "Tom" ];
var list = $("#names-list");
var parent = list.parent();

list.detach().empty().each(function(i){
    for (var x = 0; x < names.length; x++){
        $(this).append('<li>' + names[x] + '</li>');
        if (x == names.length - 1){
            $(this).appendTo(parent);
        }
    }
});
    1. Je définir la liste des noms de la liste élément, et les éléments de la liste parent
    2. - Je détacher la liste de dom afin de ne pas actualiser les dom
      pour chaque élément de la liste est ajouté.
    3. Je vide la liste au cas où il y a déjà des valeurs dans y
    4. Chaque instruction est plus pour le déclenchement d'une fonction par rapport à #les noms de liste plutôt que de traiter de multiples événements de la liste sur la page
    5. - Je exécuter une boucle passant par chaque élément du tableau
    6. Je ajouter un élément de liste avec chaque nom dans le tableau à l'détaché #les noms de liste
    7. Sur la dernière boucle, je l'ajoute à la liste complète de retour dans les dom, en ajoutant à l'élément parent

    OriginalL'auteur Daniel Tonon

  3. 1

    Utiliser le index biens fournis à la fonction de chaque. Aussi, puisque c'est des données de texte, vous pouvez utiliser les .text(...) fonction:

    $('#names-list li').each(function (index) {
  $(this).text(names[index]);
});

    Voir jsFiddle

    OriginalL'auteur jb10210

  4. -2
    var index = 0;
$('#names-list li').each(function () {
 $(this).html(names[index]);
 index = index + 1;
});

    OriginalL'auteur Hardik Patel