javascript - 迭代数组中的对象中的数组

Question

我正在尝试做一个简单的测验，发现我的 Javascript 技能比我想象的要差很多。

我有一系列问题:

var questions = [
{
    question: "Question1",
    choices: ["A","B","C"],
    answer: 0
},
//etc. x 5
];

此代码适用于将每个 questions.question 插入到 5 个 h1 部分中的每一个中:

$('section h1').each(function(index) {
        $(this).text(questions[index].question);
});

但是插入每个 questions.choices 的代码将 questions[0].choices[0] ("A") 放在第一个 li 中，将 questions[1].choices[1] ("E") 放在第二个 li 中，以及第一部分第三里的 questions[2].choices[2] (“I”)。其他四个部分的列表中没有任何内容。

$('section li').each(function(index) {
    $(this).text(questions[index].choices[index]);
});

我该如何解决这个问题，以便每个选项都放在与其问题相关的部分的自己的 li 中？例如，第一节 h1 = Question1，lis A、B 和 C，第二节 h1 = Question2，lis D、E、F 等。

编辑:http://jsfiddle.net/sbv2jj9m/

Answer 1

您可以将两个迭代器合并为一个，然后执行以下操作:

$('section').each(function(index) {
    // Set H1 text
    $('h1', this).text(questions[index].question);
    // Set list items
    $('li', this).each(function(i){
        $(this).text(questions[index].choices[i]);
    });
});

请注意，您正在迭代 <section>元素，然后作用于每个元素的子元素。内部迭代器有自己的索引，i .

$(function(){

	var questions = [
	{
		question: "Question1",
		choices: ["A", "B", "C"], 
		answer: 2
	},
	{
		question: "Question2",
		choices: ["D", "E", "F"], 
		answer: 0
	},
	{
		question: "Question3",
		choices: ["G", "H", "I"], 
		answer: 1
	},
	{
		question: "Question4",
		choices: ["J", "K", "L"], 
		answer: 2
	},
	{
		question: "Question5",
		choices: ["M", "N", "O"], 
		answer: 1
	}

	];
    
    $('section').each(function(index) {
        // Set H1 text
	    $('h1', this).text(questions[index].question);
        // Set list items
        $('li', this).each(function(i){
            $(this).text(questions[index].choices[i]);
        });
	});

    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
		<h1></h1>
		<ul>
			<li></li>
            <li></li>
            <li></li>
		</ul>
</section>

<section>
		<h1></h1>
		<ul>
			<li></li>
            <li></li>
            <li></li>
		</ul>
</section>

<section>
		<h1></h1>
		<ul>
			<li></li>
            <li></li>
            <li></li>
		</ul>
</section>

<section>
		<h1></h1>
		<ul>
			<li></li>
            <li></li>
            <li></li>
		</ul>
</section>

<section>
		<h1></h1>
		<ul>
			<li></li>
            <li></li>
            <li></li>
		</ul>
</section>