Если элемент не имеет родителя с определенным классом

Я пытаюсь создать оператор if в jQuery для элементов, у которых есть родительский элемент с определенным классом.

Это то, к чему я придумал, но это не так.

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

Кто-нибудь может указать мне в правильном направлении.

Ответ 1

Используйте length, чтобы проверить, есть ли элементы в селекторе, а closest() будет лучше, чем parents(), когда он остановится, как только найдет совпадение:

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

Ответ 2

Если вы проверяете, имеет ли элемент с классом myElem прямой родительский объект с классом myDiv, используйте следующий тест

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

Ответ 3

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

Ответ 4

Это должно выбрать те элементы, которые получили класс myElem с родителем, у которого есть класс myDiv:

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

или это должно выбрать те элементы, которые получили класс myElem и не имеют родителя, у которого есть класс myDiv:

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

Ответ 5

Попробуйте это.

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

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

Ответ 6

Лучший подход - использовать .closest(), если вы знаете имя класса для ребенка.

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

Ответ 7

единственное решение, которое работает, если $ ('. myElem') имеет более одного элемента, это решение от Zoltan

посмотрите пример здесь

 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>