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实现你想要的东西。

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

您创建了一个函数pageLoaded，但没有在任何地方调用它。您需要调用一个函数才能使其逻辑工作。假设您希望在页面准备好时调用pageLoaded方法。你可以在身体负荷上调用它，或者只是在jQuery的.ready里面，即$(document).ready(function(){ pageLoaded()});。这种方法只是确保你的逻辑在dom准备就绪时执行
您在方法“数组中的项目”中编写了非关键字，无意义的单词。删除它以使您的功能工作。假设您想在那里发表评论，请在脚本标记内添加这样的评论：
```
 //items in the array
```
您没有将新值连接到list变量，而是在每次迭代时覆盖其内容，因此请执行此操作而不是list ="<li>"+games[i]+"</li>";
```
 list +="<li>"+games[i]+"</li>";
```
最后，您要将list附加到for循环内的#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);

});

请参阅此fiddle

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

Answer 3

您需要在动态追加元素之后刷新列表视图;否则它不会更新。

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

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

3 个答案: