forループ変数は0ではなく1から始まり、jqueryの問題

Question

私は5つの回答の選択肢を持つドロップダウンオプションを持つ10の質問でフォームを作成しています。私の問題は、私がforループを開始すると、最初のループ（外側のもの） 'x'は何らかの理由で0ではなく1で始まります。そして、最初のループが実行されるまで、ループは、10個の質問を掲示し続けるが、唯一の実施例10個の質問 の1セットがあるはず

Question 1 
cat in train 
[select drop down menu] 

Question 2 
the turtle 
[select drop down menu] 

Question 3 
the slug 
[select drop down menu] 

Question 4 
the sloth 
[select drop down menu] 

Question 5 
where is 
[select drop down menu] 

Question 6 
Waldo? 
[select drop down menu] 

Question 7 
over there 
[select drop down menu] 

Question 8 
Where? 
[select drop down menu] 

Question 9 
hes gone 
[select drop down menu] 

Question 2 //then starts again at two, but it should've stopped after last set. 
the turtle 

Question 3 
the slug 

Question 4 
the sloth 

Question 5 
where is 

Question 6 
Waldo? 

Question 7 
over there 

Question 8 
Where? 

Question 9 
hes gone 

Question 3 
the slug 

Question 4 
the sloth 

Question 5 
where is 

Question 6 
Waldo? 

Question 7 
over there 

Question 8 
Where? 

Question 9 
hes gone 

Question 4 
the sloth 

Question 5 
where is 

Question 6 
Waldo? 

Question 7 
over there 

Question 8 
Where? 

Question 9 
hes gone 

Question 5 
where is 

Question 6 
Waldo? 

Question 7 
over there 

Question 8 
Where? 

Question 9 
hes gone 

Question 6 
Waldo? 

Question 7 
over there 

Question 8 
Where? 

Question 9 
hes gone 

Question 7 
over there 

Question 8 
Where? 

Question 9 
hes gone 

Question 8 
Where? 

Question 9 
hes gone 

Question 9 
hes gone 

コード

 var questions = ['Dog on plane', 'cat in train', 'the turtle', 'the slug', 'the sloth', 'where is', 'Waldo?', 'over there', 'Where?', 'hes gone']; 
     var options = [ 
      'Select an Option', 
      { 
       val: 1, 
       text: "1 (strongly agree)" 
      }, 
      { 
       val: 2, 
       text: "2" 
      }, 
      { 
       val: 3, 
       text: "3" 
      }, 
      { 
       val: 4, 
       text: "4" 
      }, 
      { 
       val: 5, 
       text: "5 (dont agree at all)" 
      } 
     ]; 

     var nameLabel = $('<label for="name">' + "Your Name" + '</label>' + '<br>'); 
     $('.rForm').append(nameLabel); 
     var namePut = $('<input type="text" id="name" placeholder="Name">' + '<br>' + '<br>'); 
     $('.rForm').append(namePut); 
     var photo = $('<label for="link">' + "Your Photo Link" + '</label>' + '<br>'); 
     $('.rForm').append(photo); 
     var photoPut = $('<input type="text" id="link" placeholder="Your Photo Link">' + '<br>' + '<br>'); 
     $('.rForm').append(photoPut); 

     for(var x = 0; x < questions.length; x++) 
     { 
      //x starts at 1 for some reason. First question should be dog one but it starts at cat question 
      var div = $('<div class="containter">'); 
      var h3 = $('<h3 style="margin-bottom: 5px;">' + "Question" + " " + x + '</h3>'); 
      $('.containter').append(h3); 
      var label = $('<label>').attr('id', 'q'+ x).text(questions[x]); 
      var br = $('<br>'); 
      $('.containter').append(label); 
      $('.containter').append(br); 
      var select = $('<select>').attr('id', 'q'+ x); 

      for(var i = 0; i < options.length; i++) 
      { 
       if(i === 0){ 
        select.append($('<option>').text(options[i])); 
       } 
       else{ 
        select.append($('<option>').attr('value', options[i].val).text(options[i].text)); 
       } 

       console.log('hi') 
      } 
      $('.containter').append(select); 

      $('.rForm').append(div); 
     } 

Answer 1

あなたの問題はあなたがアクセスしているということですcontainer div by divので、質問を追加するたびに、新しいdivとそれ以前のすべてのdivを追加します。

ループの動作の例。

After 1st loop 
div.container 
    Q1 

After 2nd loop 
div.container 
    Q1 
    Q2 
div.container 
    Q2 
and keep going 

ソリューション：

 var questions = ['Dog on plane', 'cat in train', 'the turtle', 'the slug', 'the sloth', 'where is', 'Waldo?', 'over there', 'Where?', 'hes gone']; 
     var options = [ 
      'Select an Option', 
      { 
       val: 1, 
       text: "1 (strongly agree)" 
      }, 
      { 
       val: 2, 
       text: "2" 
      }, 
      { 
       val: 3, 
       text: "3" 
      }, 
      { 
       val: 4, 
       text: "4" 
      }, 
      { 
       val: 5, 
       text: "5 (dont agree at all)" 
      } 
     ]; 

     var nameLabel = $('<label for="name">' + "Your Name" + '</label>' + '<br>'); 
     $('.rForm').append(nameLabel); 
     var namePut = $('<input type="text" id="name" placeholder="Name">' + '<br>' + '<br>'); 
     $('.rForm').append(namePut); 
     var photo = $('<label for="link">' + "Your Photo Link" + '</label>' + '<br>'); 
     $('.rForm').append(photo); 
     var photoPut = $('<input type="text" id="link" placeholder="Your Photo Link">' + '<br>' + '<br>'); 
     $('.rForm').append(photoPut); 

     for(var x = 0; x < questions.length; x++) 
     { 
      //x starts at 1 for some reason. First question should be dog one but it starts at cat question 
      var div = $('<div class="containter">'); 
      var h3 = $('<h3 style="margin-bottom: 5px;">' + "Question" + " " + x + '</h3>'); 
      $(div).append(h3); 
      var label = $('<label>').attr('id', 'q'+ x).text(questions[x]); 
      var br = $('<br>'); 
      $(div).append(label); 
      $(div).append(br); 
      var select = $('<select>').attr('id', 'q'+ x); 

      for(var i = 0; i < options.length; i++) 
      { 
       if(i === 0){ 
        select.append($('<option>').text(options[i])); 
       } 
       else{ 
        select.append($('<option>').attr('value', options[i].val).text(options[i].text)); 
       } 

       console.log('hi') 
      } 
      $(div).append(select); 

      $('.rForm').append(div); 
     }