仅当存在两个单独的 child div 时，如何将 class 添加到 parents

Question

如果存在两个单独的 child div，如何将 class 添加到 parents？

如果两个 classes 出现在 child

中，则此处的代码有效

$('.class1.class2').parents().addClass('newclass');

<div class="parentdiv">
<div class="class1 class2">        
</div>

仅当 class1 和 class2 为 children

时，我才尝试将 class 添加到 parentdiv

<div class="parentdiv">
<div class="class1">
</div>
<div class="someother">
</div>
<div class="class2">    
</div>

Answer 1

您可以将 :has() 与 select 或 .class1 ~ .class2, .class2 ~ .class 1 一起使用到 select .parentdiv 元素，其中 .class1 或 .class2 是子元素分别是 .class2 或 .class1 的一般兄弟。如果要求 select .parentdiv 仅当 .class1 后跟 .class2 时，您可以使用 select 或 .class1 ~ .class2

$(".parentdiv:has(.class1 ~ .class2, .class2 ~ .class 1)")
.addClass("selected");

.selected {
  color:olive;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parentdiv">
<div class="class1">class1
</div>
<div class="someother">smoother
</div>
<div class="class2">class2
</div>
  </div>
  <div class="parentdiv">
<div class="class1">class1
</div>
<div class="someother">smoother
</div>
<div class="class3">class3
</div>

Answer 2

Use .filter to select only those elements which satisfy condition provided in callback

var filtered = $('.parentdiv').filter(function() {
  return $(this).find('.class1').length > 0 && $(this).find('.class2').length > 0;
});
filtered.addClass('newclass')

.newclass {
  border: 2px black dotted;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="parentdiv">
  <div class="class1">
    Hello class1
  </div>
  <div class="someother">
  </div>
  <div class="class2">
    Hello class2
  </div>
</div>

仅当存在两个单独的 child div 时，如何将 class 添加到 parents

How do you add a class to parents only if two separate child divs are present

javascript

jquery

jquery-selectors