如果所有的孩子都有班级，可以添加班级到家长

Question

所以我创建了一个进度条，但我遇到了一个小问题。 规则，我想实现：

每个li.page检查，如果li.question = li.question.done，如果属实.addClass.done这

所以在下面的HTML，＃P1应该类完成，＃P2和P3＃不该“T。

如果一个.page已完成所有问题，则当前JS会将.done类添加到所有.page li的页面中。

希望有人能帮助我得到这个工作，所有帮助表示赞赏！

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

Answer 1

对于每个page我会检查的li数对带班的问题，做了元件的数量。如果他们匹配设置页面完成。

var doneCheck = function() { 
 
    $(".page").each(function() { 
 
    if($('.question.done', this).length==$('ul li',this).length) 
 
     $(this).addClass('done'); 
 
    }); 
 
} 
 
doneCheck();

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

Answer 2

与其寻找所有的问题做的，算不做起来难问题的数量。如果它为零，所有的问题都完成了。使用它来设置页面的done属性。

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

 
$("#check").click(doneCheck);

.page.done { 
 
    background-color: green; 
 
}

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

仅供参考，不能使用==比较两个选择的结果。如果你想测试自己是否是等价的，使用.is：

if (questionsDone.is(questionsInPage) 

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