Jquery append and "for" function

Question

I've made a quiz-creator, but now I'm trying to pull out the information made in that into the "frontend" quiz.

I'm trying to build a for loop like this. And also here trying to add the class '.hide' to all the divs with class '.question-holder' except the First created one.

for(var i = 0; i < questions.length; i++) 
{
    var q = questions[i];
    var answers = q.getAnswers();
    $(".question-holder").append("<h2 id='QuizQuestionHeadline'>" + q.getQuestion() + "</h2><div class='question-wrap'></div>");            
    $(".question-wrap").append("<ul class='answers' id='quiz-answers'></ul>");          

    for(var n = 0; n < answers.length; n++)
    {
        $("#quiz-answers").append("<li><input tabindex='1' type='checkbox' id='input-1'><label for='input-1'><span>"+ answers[n].getAnswer() +"</span></label></li>");          
    };
};      

for(var i = 2; i < questions.length; i++) 
{
    $(".question-holder").addClass('hide');         
};

Where the final HTML created by the above code should be:

<div class="question-holder">

<h2 id='QuizQuestionHeadline'>The Question</h2>
      <ul id='quiz-answers' class="answers">
        <li>
          <input tabindex="1" type="radio" id="input-1" name="quiz-radio">
          <label for="input-1"><span>Answer 1</span></label>
        </li>
        <li>
          <input tabindex="2" type="radio" id="input-2" name="quiz-radio" checked>
          <label for="input-2"><span>Answer 2</span></label>
        </li>
      </ul>
</div>

Anyone here that could help me out a bit? :)

Now we know what you're trying to do, what is happening instead? — user400654
– user400654, Commented May 1, 2013 at 14:24
Why are you putting semi-colons at the end of your for-loops? — Lee Taylor
– Lee Taylor, Commented May 1, 2013 at 14:24
@KevinB What's happening instead is that it is building the fronted but 1.) it doesn't put the class '.hide' to every div.question-holder except the first one. 2.) Only the first loop of answers appends, not all of them in each 'question-group'. Thing is, in the 'creator part', you can create several questions within one quiz and for each question enter some alternative answers. And in the frontend, it is supposed to go in a "slide" with question 1, question 2 and shift when you press the 'next' button. — Kim
– Kim, Commented May 1, 2013 at 14:29

Supriti Panda · Accepted Answer · 2013-05-01 14:32:15Z

3

Please note that $(".question-holder").addClass('hide'); will hide all divs with class question-holder. So for loop doesn't make any sense here.

for(var i = 2; i < questions.length; i++) {
    $(".question-holder").addClass('hide');         
};

You can do it using different id for each div and then use this addClasshide to all divs except the 1st one.

Another simple solution is:

first hide all divs and then show the 1st row as code shown below.

$(".question-holder").css('display', 'none');
$(".question-holder:first").css('display', 'block');

edited May 1, 2013 at 14:32

answered May 1, 2013 at 14:26

Supriti Panda

1,3011 gold badge11 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Kim Over a year ago

Thanks, I'm gonna try making IncrementID for the questions.

Supriti Panda Over a year ago

Another simple solution is: first hide all divs and then show the 1st row as code shown below. $(".question-holder").css('display', 'none'); $(".question-holder:first").css('display', 'block');

Supriti Panda Over a year ago

I have added another simple solution if you just need to show 1st div ;)

Reinstate Monica Cellio · Accepted Answer · 2013-05-01 14:36:26Z

0

You're still better off hiding all the relevant divs, but then just show whichever one you want...

var index = 0; // 0 based, so 0 is the first question

$(".question-holder").addClass("hide");
$(".question-holder").eq(index).removeClass("hide");

You just need to update the index variable and run that code again to show a specific question :)

answered May 1, 2013 at 14:36

Reinstate Monica Cellio

26.2k6 gold badges54 silver badges67 bronze badges

Collectives™ on Stack Overflow

Jquery append and "for" function

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related