在数组中的对象中迭代数组
问题描述:
我试图做一个简单的测验,发现我的Javascript技能比我想象的要糟糕得多。在数组中的对象中迭代数组
我有问题的数组:
var questions = [
{
question: "Question1",
choices: ["A","B","C"],
answer: 0
},
//etc. x 5
];
此代码插入每个questions.question到每个5节H1S的:
$('section h1').each(function(index) {
$(this).text(questions[index].question);
});
但这段代码插入每个问题。选项在第一个李的问题[1] .choices [1](“E”)和问题[2] .choices [2]中提出问题[0] .choices [0] (“我”)在第一部分的第三里。其他四个部分没有任何内容。
$('section li').each(function(index) {
$(this).text(questions[index].choices[index]);
});
我怎样才能解决这个问题,使每一个选择摆在得到了自己对李有关其问题的部分?例如,第一节h1 = Question1,lis A,B和C,第二节h1 = Question2,Lis D,E,F等等。
答
您可以将两个迭代器合并成一个,只是这样做:
$('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(){
\t var questions = [
\t {
\t \t question: "Question1",
\t \t choices: ["A", "B", "C"],
\t \t answer: 2
\t },
\t {
\t \t question: "Question2",
\t \t choices: ["D", "E", "F"],
\t \t answer: 0
\t },
\t {
\t \t question: "Question3",
\t \t choices: ["G", "H", "I"],
\t \t answer: 1
\t },
\t {
\t \t question: "Question4",
\t \t choices: ["J", "K", "L"],
\t \t answer: 2
\t },
\t {
\t \t question: "Question5",
\t \t choices: ["M", "N", "O"],
\t \t answer: 1
\t }
\t ];
$('section').each(function(index) {
// Set H1 text
\t $('h1', this).text(questions[index].question);
// Set list items
$('li', this).each(function(i){
$(this).text(questions[index].choices[i]);
});
\t });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
\t \t <h1></h1>
\t \t <ul>
\t \t \t <li></li>
<li></li>
<li></li>
\t \t </ul>
</section>
<section>
\t \t <h1></h1>
\t \t <ul>
\t \t \t <li></li>
<li></li>
<li></li>
\t \t </ul>
</section>
<section>
\t \t <h1></h1>
\t \t <ul>
\t \t \t <li></li>
<li></li>
<li></li>
\t \t </ul>
</section>
<section>
\t \t <h1></h1>
\t \t <ul>
\t \t \t <li></li>
<li></li>
<li></li>
\t \t </ul>
</section>
<section>
\t \t <h1></h1>
\t \t <ul>
\t \t \t <li></li>
<li></li>
<li></li>
\t \t </ul>
</section>
+0
真棒,谢谢!现在对我来说更有意义。 – key 2014-11-14 23:45:48
答
这是我采取的方法。这与你正在寻找的东西接近吗? 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>');
});
答
看来你需要前进到下一个选择,你这样做与[index +1]
更新索引,也许你会想要将它放入您的文档打开。 ..所以这样的事情:
$(document).ready(function() {
$('h1').each(function(index) {
$(this).text(questions(index + 1) + choices[index]);
}
好的。向我们显示输入*和*预期输出。你的问题很难理解。 – Madbreaks 2014-11-14 23:29:08
你能不能把第二部分粘在第一部分里面,并重命名一个索引变量? – 2014-11-14 23:30:45
@Madbreaks对不起,这就是我的意思:http://jsfiddle.net/sbv2jj9m/ – key 2014-11-14 23:33:36