Javascript 如何将数组项添加到<；李>；滑动分页

我正在做一个非常简单的测试，一个简短的测试，我试图让我在二维数组中列出的项目显示为

。我尝试使用JS

array.join（）

方法，但它并没有达到我想要的效果。我想把它们放在一个列表中，然后为每个列表添加一个单选按钮

我对Jquery有了一个小小的飞跃，所以这大部分是因为我对“语法”不熟悉。我浏览了他们API上的一些东西，

$。每一个

。。。？我相信这就像for的声明一样，我只是不能让它工作而不破坏我所拥有的一切

下面是HTML非常有趣的内容

<div id="main_">
    <div class="facts_div">
        <ul>            
        </ul>
    </div>
    <form>
        <input id="x" type="button" class="myBtn" value="Press Me">
    </form>
</div>

下面是一些非常复杂的代码。抓住你的帽子

$(document).ready (function () {
    var array = [["Fee","Fi","Fo"], 
    ["La","Dee","Da"]];
    var q = ["<li>Fee-ing?","La-ing?</li>"];


    var counter = 0;

    $('.myBtn').on('click', function () {
        $('#main_ .facts_div').text(q[counter]);
        $('.facts_div ul').append('<input type= "radio">' 
            + array[counter]);
        counter++;

        if (counter > q.length) {
            $('#main_ .facts_div').text('You are done with the quiz.');
            $('.myBtn').hide();
        }

    }); 
});

$（文档）.ready（函数（）{
变量数组=[[“费用”、“Fi”、“Fo”]，
[“La”、“Dee”、“Da”]；
var q=[“
收费？”，“La-ing？
”；
var计数器=0；
$（'.myBtn'）。在（'click'，函数（）{
$（'main_35;facts_udiv'）.text（q[计数器]）；
$（'.facts_div ul'）。附加（''
+数组[计数器]；
计数器++；
如果（计数器>q长度）{
$（'main_35;facts_udiv'）.text（'您完成了测验'）；
$（'.myBtn'）.hide（）；
}
}); 
});

您可以使用

$。每个
迭代
数组[计数器]
并为您的选项创建
li
元素：

var list = $('.facts_div ul');
$.each(array[counter], function() {
    $('<li></li>').html('<input type="radio" /> ' + this).appendTo(list);
}

您将使用
q[计数器]
替换元素的内容，丢失元素内的
ul
标签。在这种情况下，您可以使用
prepend
方法而不是
text
将此文本添加到标记的开头，或者创建一个新元素来保存这段文本。
试试看

<div id="main_">
    <div class="facts_div"> <span class="question"></span>

        <ul></ul>
    </div>
    <form>
        <input id="x" type="button" class="myBtn" value="Press Me" />
    </form>
</div>




及

jQuery（函数（$）{
//
变量数组=[
[“费用”、“Fi”、“Fo”]，
[“La”、“Dee”、“Da”]
];
var q=[“收费？”，“收费？”]；
var计数器=0；
//缓存所有可能的值，因为它们被多次请求
var$facts=$（'main#facts_div'），
$QUOTE=$facts.find（'.QUOTE'），
$ul=$facts.find（'ul'），
$btn=$（'.myBtn'）；
$btn.on（'单击'，函数（）{
//显示问题的详细信息，只有问题的详细信息可用
if（计数器”+值+”'
}).加入（“”）；
$ul.html（ansstring）；
计数器++；
}否则{
$facts.text（'您已经完成了测试'）；
$（this.hide（）；
}
});
//
});

演示：
我希望我不必只挑选一个最佳答案。你们俩帮了我很多。但是，他的代码帮助我认识到，我需要缓存项目，其中包含更多的信息。我一定会尝试使用
$。不过每个
。
<div id="main_">
    <div class="facts_div"> <span class="question"></span>

        <ul></ul>
    </div>
    <form>
        <input id="x" type="button" class="myBtn" value="Press Me" />
    </form>
</div>

jQuery(function ($) {
    //

    var array = [
        ["Fee", "Fi", "Fo"],
        ["La", "Dee", "Da"]
    ];
    var q = ["Fee-ing?", "La-ing?"];


    var counter = 0;

    //cache all the possible values since they are requested multiple times
    var $facts = $('#main_ .facts_div'),
        $question = $facts.find('.question'),
        $ul = $facts.find('ul'),
        $btn = $('.myBtn');

    $btn.on('click', function () {
        //display the question details only of it is available
        if (counter < q.length) {
            $question.text(q[counter]);

            //create a single string containing all the anwers for the given question - look at the documentation for jQuery.map for details 
            var ansstring = $.map(array[counter], function (value) {
                return '<li><input type="radio" name="ans"/>' + value + '</li>'
            }).join('');
            $ul.html(ansstring);

            counter++;
        } else {
            $facts.text('You are done with the quiz.');
            $(this).hide();
        }
    });
    //
});