Jquery追加和“for”函数

Question

我制作了一个测验创建器，但现在我正试图将其中的信息提取到“前端”测验中。

我正在尝试构建这样的 for 循环。并且在这里尝试将类 '.hide' 添加到所有具有类 '.question-holder' 的 div 中，但第一个创建的除外。

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

上述代码创建的最终 HTML 应该在哪里：

<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>

这里有人可以帮我吗？ :)

Answer 1

您最好还是隐藏所有相关的 div，然后只显示您想要的任何一个...

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

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

您只需更新index 变量并再次运行该代码以显示特定问题:)

Answer 2

请注意$(".question-holder").addClass('hide'); 将隐藏所有具有question-holder 类的div。所以 for 循环在这里没有任何意义。

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

您可以为每个 div 使用不同的 id，然后将此 addClasshide 用于除第一个以外的所有 div。

---

另一个简单的解决方案是：

先隐藏所有div，然后显示第一行，如下代码。

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