如何使用 jQuery 用数组项填充 UL？答案

【问题标题】：How do I fill a UL with array items using jQuery?如何使用 jQuery 用数组项填充 UL？
【发布时间】：2014-08-09 01:46:22
【问题描述】：

尝试使用 jQuery 将数组值放入单选按钮的ul。

HTML

<div class="quizWindow">
<h1>The Bridge Of Death</h1>
    <div id="question"></div>
        <form>
         <ul id = "choices">

         </ul>
        </form>
    <div id = "quizMessage"></div>
    <div id = "result"></div>
    <div id = "nextButton"><span>Start Quiz</span></div>
<br>
</div>

var allQuestions = [{question: "What, is your name?", choices: ["Sir Lancelot the brave", "Sir Galahad the brave", "Sir not appearing in this film"], correctAnswer: 1}, {question: "What, is your quest?", choices: ["To seek the holy grail", "To dream the impossible dream", "To get back on the horse"], correctAnswer: 1 }, {question: "What is the airspeed velocity of an unladen swallow?", choices: ["16mph", "I don't know that!", "What do you mean; an african or a european swallow?"], correctAnswer: 3}];

$(document).ready(function () {
    //Start Quiz, show first set of questions
    $('#nextButton').click(function () {
        $('#question').text(allQuestions[0].question);
            for (var i = 0; i <= allQuestions.length; i++) {

            $.each(allQuestions, function(i, question) {
                var $ul = $('<ul/>'); //make a new ul for this question

                //iterate through each choice for this question
                $.each(question.choices, function (i, choices) {
                    //add the choice to the ul
                    $ul.append('<li><label><input type="radio" name="question' + i + '" value="' + choices + '"> ' + choices + '</label></li>');
                });

                //add the new ul to the form
                $('.choices').append($ul);
            });
        }
    });
});

我的问题出现在 HTML 中，但下面没有任何选项。我认为这是我在 jQuery 中的 HTML 格式的问题，但我没有看到它。

【问题讨论】：

您只需要一个普通的for 或$.each() 循环。展示您尝试过的内容，我们将帮助您解决问题。此外，显示您希望生成的 HTML 的样子。

标签： javascript jquery html arrays

【解决方案1】：

您可以轻松地使用$.each 来遍历对象和数组。请注意，我已将每个输入的 name 更改为 'question'+question number。这是因为您显然不能有多个问题都具有相同的name。

//iterate through each question
$.each(allQuestions, function(i, question){
    var $ul = $('<ul/>'); //make a new ul for this question

    //iterate through each choice for this question
    $.each(question.choices, function(ii, choice){
        //add the choice to the ul
        $ul.append('<li><label><input type="radio" name="question'+i+'" value="'+choice+'"> '+choice+'</label></li>');
    });

    //add the new ul to the form
    $('.choices').append($ul)
});

【讨论】：

【解决方案2】：

是的，您需要循环播放。试试这样的。

var $ul = $('ul.yourUl');

for(var i = 0; i < allQuestions.length; i++) {
    var $li = $("<li></li>"); //Do whatever is needed to make this li

    $ul.append($li);
}

【讨论】：