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

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元素循環。