如果所有子级都有 class，则将 class 添加到父级

Question

所以我正在创建一个进度条，但运行遇到了一个小问题。我要执行的规则：

对于每个 li.page 检查是否 li.question = li.question.done，如果为真 .addClass .done 到此

所以在下面的 HTML 中，#p1 应该 class 完成，#p2 和 #p3 不应该。

如果一个 .page 完成了所有问题，当前 JS 会向页面中的所有 .page 李添加 class .done。

希望有人能帮助我完成这项工作，感谢所有帮助！

这是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 的数量与 class 问题的元素数量，然后完成。如果他们匹配设置页面完成。

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)

但是你的第二个循环是错误的，因为它根据循环的当前页面。

如果所有子级都有 class，则将 class 添加到父级

Add class to parent if all childeren have class

html

javascript

each

jquery

addclass