jquery显示<ul>中的项目列表

Question

嗨,我想在里面显示一个项目列表

示例HTML代码

<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 = 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 = "";
        }

}

似乎我的js代码有问题.它不输出任何东西

Answer 1

你做错了很多事.

首先,它不是纯粹的javascript,它的jquery.

你需要引用jQuery api才能使用jQuery.

但是,你也可以通过纯JavaScript实现你想要的.

现在让我们来看看你的错误

1. 你已经创建了一个函数pageLoaded,但没有在任何地方调用它.您需要调用函数才能使其逻辑工作.假设你想pageLoaded在页面准备就绪时调用你的方法.你可以把它的身体负荷或只是内部jQuery的.就绪即 $(document).ready(function(){ pageLoaded()});.这个方法只是确保你的逻辑在dom准备就绪时执行

2. 你在方法"数组中的项目"中写了非关键词,无意义的单词.删除它以使您的功能工作.假设您想在那里发表评论,请在脚本标记内添加这样的评论:

    //items in the array
   

3. 你没有将新值连接到你的list变量,你是在每次迭代时覆盖它的内容,所以list ="<li>"+games[i]+"</li>";不要这样做,这样做

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

4. 最后,你在for循环中追加list到#gamelist了.在循环之外做.一旦你的清单完成.并删除该行list=" " ,将此行 $("#gamelist").append(list);放在for循环之外.

尝试你的功能:

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);

});

看到这个小提琴

Answer 2

关于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);
});

这是纯 Javascript，但我看到您将标签更改为 jQuery，但我将把它留在这里。

此外，如果您不想创建初始化的数组，就像我上面所做的那样，您可以这样做，因为这new Array()被认为是不好的做法。

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");