javascript jquery 在 <ul> 中显示项目列表

jquery display a list of items in <ul>

提问by Michael

Hi I want to display a list of item inside

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

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

}

Seems there is wrong with my js code. It doesn't output anything

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

回答by Manish Mishra

There are so many things you are doing wrong in it.

你做错了很多事情。

Firstly, it is not pure javascript, its jquery.

首先，它不是纯 javascript，而是它的 jquery。

you need to reference jQuery apito be able to use jQuery.

您需要引用jQuery api才能使用 jQuery。

however, you can achieve what you want through pure javascript also.

但是，您也可以通过纯 javascript 实现您想要的。

Now let's look at your mistakes

现在让我们看看你的错误

1. you have created a function pageLoaded, but have not called it anywhere. You need to call a function in order to make its logic work. Am assuming you want to call your pageLoadedmethod when the page is ready. you can either call it on body load or simply inside jQuery's .readyi.e $(document).ready(function(){ pageLoaded()});. This method simply ensures, your logic executes when the dom is ready

2. you have written non-keyword, meaningless words inside your method "items in the array". remove it in order to make your function work. Am assuming you wanted to put a comment over there, put a comment like this inside script tag:

    //items in the array
   

3. you are not concatenating new values to your listvariable, you are overwritting its content with each iteration, so instead of list ="<li>"+games[i]+"</li>";this, do this

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

4. finally, you are appending the listto #gamelistinside the for loop. do it outside the loop. once your list is complete. and remove the line list=" "so place this line $("#gamelist").append(list);outside the for loop.

1. 您创建了一个函数pageLoaded，但没有在任何地方调用它。您需要调用一个函数才能使其逻辑正常工作。假设您想pageLoaded在页面准备好时调用您的方法。你可以在 body load 上调用它，也可以在 jQuery 的.readyie 中 调用它$(document).ready(function(){ pageLoaded()});。此方法只是确保您的逻辑在 dom 准备好时执行

2. 您在方法“数组中的项目”中编写了非关键字、无意义的词。删除它以使您的功能正常工作。假设您想在那里发表评论，请在脚本标签中添加这样的评论：

    //items in the array
   

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

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

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

try your function like this:

像这样尝试你的功能：

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

});

see this fiddle

看到这个小提琴

回答by Xotic750

On jsfiddle

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

This is pure Javascript but I see you changed your tag to jQuery, but I will leave it here.

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

Additionally if you didn't want to create the array initialised, like I did above, you could have done it like this, as new Array()is considered bad practise.

此外，如果您不想创建初始化的数组，就像我上面所做的那样，您可以这样做，因为这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");

回答by MGA

You need to refresh the listview after dynamically appending elements in it; otherwise it won't update.

您需要在动态添加元素后刷新列表视图；否则不会更新。

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