For循环变量从1开始而不是0和jquery问题

Question

我正在制作一个包含10个问题的表单，每个问题都有一个包含5个答案选项的下拉选项。我的问题是，当我开始for循环，第一个循环（外部）'x'从1开始，而不是0由于某种原因。然后循环不断发布10个问题，直至第一循环完成，但应该只有一组的10个问题 例

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按分类，所以每次添加问题时，都会将其添加到新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); 
     }