CODEWITHSUNDEEP
javascriptjqueryjquery-selectors
notascoobydo
notascoobydo

Reputation: 9

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

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

The code here works if the two classes are present in a child

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

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

I am trying to add class to parentdiv only if class1 and class2 are children

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

Upvotes: 1

Views: 35

Answers (2)

Rayon
Rayon

Reputation: 36609

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>

Upvotes: 0

guest271314
guest271314

Reputation: 1

You can use :has() with selector .class1 ~ .class2, .class2 ~ .class 1 to select .parentdiv element where .class1 or .class2 is child element is a general sibling of .class2 or .class1 respectively. If requirement is to select .parentdiv only if .class1 is followed by .class2 you can use selector .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>

Upvotes: 1

Related Questions