jquery afficher une liste d'éléments dans <ul>

Salut, je veux afficher une liste de point à l'intérieur de

exemple de code html

<h3 id="game-filter" class="gamesection">
           <span>Game</span></h3>
        <div id="game-filter-div" style="padding: 0;">
            <ul id="gamelist">
            </ul>
        </div>

code

var games = new Array();
    games[0] = "World of Warcraft";
    games[1] = "Lord of the Rings Online";
    games[2] = "Aion";
    games[3] = "Eve Online";
    games[4] = "Final Fantasy XI";
    games[5] = "City of Heros";
    games[6] = "Champions Online";
    games[7] = "Dark Age of Camelot";
    games[8] = "Warhammer Online";
    games[9] = "Age of Conan";
    function pageLoaded(){
        var list = "";

            for(i=0; i<games.length; i++){
        list ="<li>"+games[i]+"</li>";
        $("#gamelist").append(list);
        //document.getElementById("gamelist").innerHTML=list;
        list = "";
        }

}

Semble y avoir un problème avec mon code js. Il n'est pas sortie tout

il n'est pas le javascript, ses jQuery. avez-vous de la référence de l'api jQuery?
aussi, vous ne faites pas appel pageLoaded() la fonction n'importe où
Exécutez-vous items in the array dans votre code ou est-il commenté?

OriginalL'auteur Michael | 2013-04-19

  1. 8

    Il y a tellement de choses que vous faites de mal à cela.

    Tout d'abord, il n'est pas pur javascript, ses jquery.

    vous avez besoin de faire référence à jQuery api pour être en mesure d'utiliser jQuery.

    cependant, vous pouvez obtenir ce que vous voulez par le biais de javascript aussi.

    Examinons maintenant vos erreurs

    1. vous avez créé une fonction pageLoaded, mais n'ont pas appelé de n'importe où. Vous avez besoin d'appeler une fonction pour faire sa logique de travail. Suis en supposant que vous souhaitez appeler votre pageLoaded méthode lorsque la page est prête. vous pouvez l'appeler sur le corps de la charge ou tout simplement à l'intérieur de jQuery .prêt je.e $(document).ready(function(){ pageLoaded()});.
      Cette méthode garantit simplement, votre logique s'exécute lorsque le dom est prêt

    2. vous avez écrit de non-mot-clé, le sens des mots à l'intérieur de votre méthode "éléments du tableau". de l'enlever pour faire de votre fonction de travail. Suis en supposant que vous voulais mettre un commentaire là-dessus, mettre un commentaire comme celui-ci à l'intérieur de balise de script:

       //items in the array

    3. vous n'êtes pas de la concaténation de nouvelles valeurs pour votre list variable, vous overwritting son contenu à chaque itération, donc au lieu de list ="<li>"+games[i]+"</li>"; ceci, faites cela 

       list +="<li>"+games[i]+"</li>";

    4. enfin, vous ajoutez les list à #gamelist intérieur de la boucle for. le faire en dehors de la boucle. une fois que votre liste est complète. et supprimer la ligne list=" "
      donc, placez cette ligne $("#gamelist").append(list); en dehors de la boucle for.

    tentez votre fonction comme ceci:

    var games = new Array();
    games[0] = "World of Warcraft";
    games[1] = "Lord of the Rings Online";
    games[2] = "Aion";
    games[3] = "Eve Online";
    games[4] = "Final Fantasy XI";
    games[5] = "City of Heros";
    games[6] = "Champions Online";
    games[7] = "Dark Age of Camelot";
    games[8] = "Warhammer Online";
    games[9] = "Age of Conan";
$(document).ready(function(){
        var list = "";
        for(i=0; i<games.length; i++){
        list +="<li>"+games[i]+"</li>";
        }
    $("#gamelist").append(list);

});

    voir ce violon

    Je vous remercie beaucoup. Cela aide vraiment.

    OriginalL'auteur Manish Mishra

  2. 4

    Sur jsfiddle

    <h3 id="game-filter" class="gamesection"><span>Game</span></h3>

<div id="game-filter-div" style="padding: 0;">
    <ul id="gamelist"></ul>
</div>

var games = ["World of Warcraft", "Lord of the Rings Online", "Aion", "Eve Online", "Final Fantasy XI", "City of Heros", "Champions Online", "Dark Age of Camelot", "Warhammer Online", "Age of Conan"];

var gamelist = document.getElementById("gamelist");

games.forEach(function (game) {
    var li = document.createElement("li");

    li.textContent = game;
    gamelist.appendChild(li);
});

    C'est de la pure Javascript mais je vois que vous avez changé de tag de jQuery, mais je vais le laisser ici.

    De plus, si vous ne voulez pas créer le tableau initialisé, comme je l'ai fait ci-dessus, vous pourriez avoir fait comme ceci, comme new Array() est considéré comme une mauvaise pratique.

    var games = new Array();

games.push("World of Warcraft");
games.push("Lord of the Rings Online");
games.push("Aion");
games.push("Eve Online");
games.push("Final Fantasy XI");
games.push("City of Heros");
games.push("Champions Online");
games.push("Dark Age of Camelot");
games.push("Warhammer Online");
games.push("Age of Conan");

    OriginalL'auteur Xotic750

  3. 0

    Vous avez besoin de rafraîchir la liste après dynamiquement en ajoutant des éléments qui le composent; sinon il ne sera pas mise à jour.

     $("#gamelist").append(list).listview("refresh");

    OriginalL'auteur MGA