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>

Answer 2

仅使用CSS：

$(".item-group-condensed").click(function() {
  $(this).toggleClass("collapsed_module")
})

.item-group-condensed.collapsed_module {
  color: black;
}

.item-group-condensed:not(.collapsed_module) {
  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">
  Item 1
</div>


<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"> 
  Item 2
</div>

使用jQuery遍历元素，但仅当没有类时才采取行动

2 个答案: