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

Question

If this works when a class is present...

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

How would I add a class if the child class .no-priority is missing?

Tried code below which does not work

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

Neither does

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

Answer 1

You can use :not() , :has()

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

 .normal { color: green; } 

 <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> 

Answer 2

Use filter

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

Answer 3

If I understand your question, you can do this in 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>