在數組中的對象中迭代數組

我試圖做一個簡單的測驗，發現我的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等等。

編輯：http://jsfiddle.net/sbv2jj9m/

來源

2014-11-14 key

好的。向我們顯示輸入*和*預期輸出。你的問題很難理解。 – 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

您可以將兩個迭代器合併成一個，只是這樣做：

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

來源

2014-11-14 23:40:11 Madbreaks

真棒，謝謝！現在對我來說更有意義。 – key 2014-11-14 23:45:48

這是我採取的方法。這與你正在尋找的東西接近嗎？ Demo here

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>'); 

});

來源

2014-11-14 23:41:24 elzi

看來你需要前進到下一個選擇，你這樣做與[index +1]更新索引，也許你會想要將它放入您的文檔打開。 ..所以這樣的事情：

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

來源

2014-11-14 23:50:48

在數組中的對象中迭代數組

回答

相關問題