jquery - 使用 jQuery 循环遍历元素，但仅在没有类时才执行操作

Question

我有一些可以通过点击切换折叠的 div。

关闭/折叠

<div class="item-group-condensed context_module     editable_context_module     has_requirements      student-view collapsed_module" aria-label="Service Desk Module" data-workflow-state="active" data-module-url="/courses/2/modules/37" data-module-id="37" id="context_module_37" style="">

打开

<div class="item-group-condensed context_module editable_context_module           student-view context_module_hover" aria-label="Practice Module" data-workflow-state="active" data-module-url="/courses/2/modules/40" data-module-id="40" id="context_module_40" style="">

当它们折叠时，它们有一个类 .collapsed_module

我想循环遍历它们，如果它们没有该类，则执行某些操作。在我下面的例子中，他们都是红色的，而不仅仅是那些缺课的人。

if (!$(".item-group-condensed").hasClass("collapsed_module")) {
    $(".item-group-condensed .ig-header span.ig-header-title span.name").css("color", "red");
}

我需要将其放入each() 中吗？任何帮助将不胜感激。

Answer 1

您可以使用:not选择器:

$(".item-group-condensed:not(.collapsed_module) .ig-header span.ig-header-title span.name")
  .css("color", "red");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item-group-condensed context_module     editable_context_module     has_requirements      student-view collapsed_module" aria-label="Service Desk Module" data-workflow-state="active" data-module-url="/courses/2/modules/37" data-module-id="37"
  id="context_module_37" style="">
  <div class="ig-header"><span class="ig-header-title"><span class="name">Name 1</span></span>
  </div>
</div>

<div class="item-group-condensed context_module     editable_context_module     has_requirements      student-view" aria-label="Service Desk Module" data-workflow-state="active" data-module-url="/courses/2/modules/37" data-module-id="37" id="context_module_37"
  style="">
  <div class="ig-header"><span class="ig-header-title"><span class="name">Name 2</span></span>
  </div>
</div>