Question

我试图做一个简单的测验，发现我的Javascript技能比我想象的要糟糕得多。

我有一系列问题：

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

此代码适用于将每个问题。问题插入5个部分h1中的每个部分：

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

但是这个用于插入每个问题的代码。在第一个问题[1]中提出问题[0] .choices [0]（＆＃34; A＆＃34;），问题[1]。[1]（＆＃34 ; E＆＃34;）在第二部分中，问题[2] .choices [2]（＆＃34; I＆＃34;）在第一部分的第三部分中。其他四个部分没有任何内容。

$('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>

Answer 2

这是我采取的方法。这接近你正在寻找的东西吗？ Demo here

<强> JS

var questions = [
{
  question: "Question1",
  choices: ["A","B","C"],
  answer: 0
},{
  question: "Question2",
  choices: ["A", "B", "C", "D"],
  answer: 1
}];


questions.forEach(function (q,index) {
  var section = $('body').append('<section></section>');
  var queston = section.append('<h1>'+q.question+'</h1>');
  var choices = section.append('<ul></ul>');

  for (var i=0; i<q.choices.length; i++) {
    choices.append('<li>'+q.choices[i]+'</li>');
  }

  var answer = section.append('<span>Answer: '+q.choices[q.answer]+'</span>');

});

Answer 3

您似乎需要前进到下一个选择，然后通过使用[index +1]更新索引来实现这一点，也许您希望将其放入打开的文档中......这样的事情：< / p>

$(document).ready(function() {
$('h1').each(function(index) {
$(this).text(questions(index + 1) + choices[index]);
}

迭代数组中对象中的数组

3 个答案: