If element does not have parent with specific class

Question

I am trying to create an if statement in jQuery for elements that have a parent with a specific class.

This is what I've come up with so far but it's not right.

if(!$(".myElem").parents(".myDiv")) {
    console.log("test")
};

Can anyone point me in the right direction please.

http://stackoverflow.com/questions/31044/is-there-an-exists-function-for-jquery — Narek, Mar 28 '13 at 11:29
possible duplicate of [how to judge an element's previous or next element exist with jquery?](http://stackoverflow.com/questions/5685685/how-to-judge-an-elements-previous-or-next-element-exist-with-jquery) -- same problem, even if the direction is a bit different. — Felix Kling, Mar 28 '13 at 11:29
Title does not match question. Title : "If element does NOT have", question: " elements that have" — Zoltan.Tamasi, Mar 28 '13 at 11:40
Thanks @Narek... I had done a search for this but it didn't come up with that one... works a treat though. — Tom, Mar 28 '13 at 11:43
It is unclear if you want to check only direct parents or all parents. — Zoltan.Tamasi, Mar 28 '13 at 11:59

adeneo · Accepted Answer · 2013-03-28T11:50:56.167

29

Use length to check it there are elements in the selector, and closest() would be better than parents() as it stops once it finds a match:

if(! $(".myElem").closest(".myDiv").length ) {
    console.log("has no parent with the class .myDiv")
}

edited Mar 28 '13 at 11:50

answered Mar 28 '13 at 11:28

adeneo

312,895
29
395
388

1

Closest will find not only direct parents, but will search up until find one. – Zoltan.Tamasi Mar 28 '13 at 11:35

Arun P Johny · Answer 2 · 2013-03-28T11:35:31.567

6

If you are testing whether the element with class myElem has a direct parent with class myDiv use the following test

if(!$(".myElem").parent().hasClass("myDiv")) {
    console.log("test")
};

edited Mar 28 '13 at 11:35

answered Mar 28 '13 at 11:28

Arun P Johny

384,651
66
527
531

2

here .hasClass() would be better option than .is() – IT ppl Mar 28 '13 at 11:34

score 3 · Answer 3 · answered Mar 28 '13 at 11:36

3

if($(".myElem").parent().hasClass(".myDiv")) {
    console.log("has a parent with the class .myDiv")
}
else
{
    console.log("no parent class .myDiv found")
}

answered Mar 28 '13 at 11:36

IT ppl

2,626
1
39
56

score 2 · Answer 4 · answered May 20 '19 at 21:08

the only solution that works if $('.myElem') has more than one element is the one from Zoltan

see the example here

 var takeElements = $('.myElement').filter(function(){
   return $(this).closest('.bannedAncestors').length === 0
 });
 
 takeElements.css('color','green');
 
 var bannedElements = $('.myElement').filter(function(){
   return $(this).closest('.bannedAncestors').length !== 0
 });
 
 bannedElements.css('color','red');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="bannedAncestors">
  <div> number of nested element don't matters
    <div class="myElement">
      don't take this child since it has an ancestor we don't want
    </div>
  </div>
</div>
<div>
  <div>
    <div class="myElement">
      but this one is ok
    </div>
  </div>
</div>

Zoltan.Tamasi · Answer 5 · 2013-03-28T11:57:34.867

1

This should select those elements that have got class myElem with a parent that has a class myDiv:

$(".myElem").filter(function(elem) {
    return $(this).parents(".myDiv").length
});

or this should select those elements that have got class myElem and does not have a parent that has a class myDiv:

$(".myElem").filter(function(elem) {
    return !$(this).parents(".myDiv").length
});

edited Mar 28 '13 at 11:57

answered Mar 28 '13 at 11:33

Zoltan.Tamasi

1,382
13
26

score 0 · Answer 6 · answered Mar 28 '13 at 11:38

0

Try this one.

   if($("#child").parent("span#parent").length > 0)
   {
          console.log("parent is span");

   }
   else {
          console.log("parent is not span or no parent");
   }

answered Mar 28 '13 at 11:38

karthick

5,998
12
52
90

score 0 · Answer 7 · answered Mar 28 '13 at 12:01

0

A better approach is to use .closest() if you know the classname of the child.

if(!$('yourtag.childClass').closest('yourParentTag').hasClass('classname')){
    console.log('does not exist');
}

answered Mar 28 '13 at 12:01

Sanjay

1,595
1
17
29

If element does not have parent with specific class

7 Answers7