Question

如果在课堂上有效的话......

$('.priority').children('.no-priority').addClass('normal');

如果缺少子类.no-priority，我将如何添加一个类？

尝试下面的代码不起作用

if (!$('.priority').children('.no-priority')) {
 $('.priority').addClass('prioritised');
 }

也没有

$('.priority').not('.no-priority').addClass('prioritised');

Answer 1

您可以使用:not()，:has()

＆＃13;

$(".priority:not(:has(.no-priority))").addClass("normal")

＆＃13;

.normal {
  color: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="priority">
  <div class="does-not-have-no-priority">
    does not have .no-priority
  </div>
</div>

<div class="priority">
  <div class="no-priority">
    has .no-priority
  </div>
</div>

＆＃13;

Answer 2

使用filter

＆＃13;

$('.priority').filter(function() {
  return $(this).find('.no-priority').length === 0;
}).addClass('normal');

＆＃13;

Answer 3

如果我理解你的问题，你可以在vanilla javascript中执行此操作：

var priority = document.querySelectorAll('.priority');

for (var i = 0; i < priority.length; i++) {
  if (priority[i].querySelector('.no-priority')) {
    priority[i].classList.add('normal');
  } else {
    priority[i].classList.add('prioritised');
  }
}

.priority.normal {
  color: red;
}

.priority.prioritised {
  color: blue; 
}

<div class="priority">
  <div class="no-priority">no priority</div>
</div>

<div class="priority">
  <div class="foo">priority</div>
</div>

如果子元素不存在，则添加类

3 个答案: