如果元素没有特定类的父元素

Question

我正在尝试在jQuery中创建一个if语句，用于筛选具有特定类父元素的元素。

这是我目前想出来的代码，但它并不正确。

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

请问有人能指点我一下吗？

- Tom

---

https://dev59.com/ZnVD5IYBdhLWcg3wR5go - Narek

可能是重复问题：如何使用jQuery判断元素的前一个或后一个元素是否存在？ - 即使方向有些不同，但问题相同。 - Felix Kling

标题与问题不符。标题：“如果元素没有”，问题：“有元素的”。 - Zoltan.Tamasi

谢谢@Narek...我已经搜索过了，但没有找到那个...不过它确实很有效。 - Tom

不清楚您是否仅想检查直接父级还是所有父级。 - Zoltan.Tamasi

Answer 1

使用 length 检查选择器中是否有元素，而 closest() 要比 parents() 更好，因为它一旦找到匹配就停止搜索：

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

- adeneo

---

Closest 不仅会找到直接的父级，而且会一直向上搜索直到找到一个。 - Zoltan.Tamasi

Answer 2

如果你要测试一个class为myElem的元素是否有一个名为myDiv的直接父元素，请使用以下测试

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

- Arun P Johny

---

在编程中，使用.hasClass()比使用.is()更好。 - IT ppl

Answer 3

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

- IT ppl

Answer 4

如果$('.myElem')有多个元素，唯一可行的解决方案是来自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>

- Marc Nicole

Answer 5

这应该选择那些具有父元素类为myDiv的class为myElem的元素：

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

或者这应该选择那些具有类myElem且没有父元素具有类myDiv的元素：

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

- Zoltan.Tamasi

Answer 6

试试这个。

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

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

- karthick

Answer 7

一种更好的方法是，如果你知道子元素的类名，就使用.closest()。

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

- Sanjay