Добавить класс в родительский, если у всех childeren есть класс

Question

Итак, я создаю индикатор выполнения, но у меня возникает небольшая проблема. правила я пытаюсь выполнить:

для каждого li.page проверки, если li.question = li.question.done, если это правда .addClass.done к этому

Таким образом, в приведенном ниже HTML, # p1 должны быть сделаны классом, # p2 и p3 # не должны «т.

Текущий JS приводит к добавлению класса .done ко всем .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'); 
      }; 
     }); 
    }); 
} 

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>

FYI, вы не можете использовать == сравнить результаты двух селекторов. Если вы хотите, чтобы проверить, являются ли они эквивалентны, используйте .is:

if (questionsDone.is(questionsInPage) 

Но ваш второй цикл не так, поскольку он устанавливает класс на все.page элементы на основе done статуса текущей страницы из петля.