如果所有孩子都有班级

时间:2015-07-02 20:28:40

标签: javascript jquery html each addclass

所以我创建了一个进度条,但我遇到了一个小问题。 我试图实施的规则:

每次li.page检查li.question = li.question.done是否为真.addClass .done

所以在下面的HTML中,#p1应该已经完成​​了课程,#p2和#p3应该没有。

如果一个.done已完成所有问题,那么当前的JS会向页面中的所有.page个人添加课程.page

希望有人能帮助我开展工作,感谢所有人的帮助!

这是html:

<ul class="pages">
    <li id="p1" class="page">
        <ul class="questions">
            <li id="q2" class="question done">1</li>
            <li id="q3" class="question done">2</li>
            <li id="q4" class="question done">3</li>
        </ul>
    </li>
    <li id="p2" class="page">
        <ul class="questions">
            <li id="q5" class="question current">4</li>
        </ul>
    </li>
    <li id="p3" class="page">
        <ul class="questions">
            <li id="q6" class="question done">5</li>
            <li id="q7" class="question">6</li>
        </ul>
    </li>           
</ul>

这个JS:

var doneCheck = function(){
    $(".page").each(function () {
        questionsInPage = $(this).closest(".questions").find("li").length;
        questionsDone = $(this).closest(".questions").find("li.done").length;

        var done = questionsDone == questionsInPage;

        $(".page").each(function() {
            if (done) {
                $(this).parent().addClass('done');
            };
        });
    });
}

2 个答案:

答案 0 :(得分:0)

对于每个page,我会根据类问题和已完成的元素数检查li的数量。如果他们匹配设置页面完成。

&#13;
&#13;
var doneCheck = function() {
  $(".page").each(function() {
    if($('.question.done', this).length==$('ul li',this).length)
      $(this).addClass('done');
  });
}
doneCheck();
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="pages">
  <li id="p1" class="page">
    <ul class="questions">
      <li id="q2" class="question done">1</li>
      <li id="q3" class="question done">2</li>
      <li id="q4" class="question done">3</li>
    </ul>
  </li>
  <li id="p2" class="page">
    <ul class="questions">
      <li id="q5" class="question current">4</li>
    </ul>
  </li>
  <li id="p3" class="page">
    <ul class="questions">
      <li id="q6" class="question done">5</li>
      <li id="q7" class="question">6</li>
    </ul>
  </li>
</ul>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

不要找到所有已完成的问题,而是计算已完成问题的数量。如果它为零,则所有问题都已完成。使用此选项设置页面的done属性。

&#13;
&#13;
function doneCheck() {
  $(".page").each(function() {
    var allDone = $(this).find(".questions li.question:not(.done)").length == 0;
    $(this).toggleClass("done", allDone);
  });
}

$("#check").click(doneCheck);
&#13;
.page.done {
  background-color: green;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="pages">
  <li id="p1" class="page">
    <ul class="questions">
      <li id="q2" class="question done">1</li>
      <li id="q3" class="question done">2</li>
      <li id="q4" class="question done">3</li>
    </ul>
  </li>
  <li id="p2" class="page">
    <ul class="questions">
      <li id="q5" class="question current">4</li>
    </ul>
  </li>
  <li id="p3" class="page">
    <ul class="questions">
      <li id="q6" class="question done">5</li>
      <li id="q7" class="question">6</li>
    </ul>
  </li>
</ul>
<button id="check">Check</button>
&#13;
&#13;
&#13;

仅供参考,您无法使用==来比较两个选择器的结果。如果您想测试它们是否相同,请使用.is

if (questionsDone.is(questionsInPage)

但是你的第二个循环是错误的,因为它根据循环当前页面的.page状态在所有 done元素上设置类。