web-dev-qa-db-ja.com

要素に特定のクラスの親がない場合

特定のクラスを持つ親を持つ要素のjQueryでifステートメントを作成しようとしています。

これは私がこれまでに思いついたことですが、それは正しくありません。

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

誰かが私を正しい方向に向けることができますか？.

javascriptjqueryparent
15
Tom

lengthを使用して、セレクターに要素があることを確認します。一致が見つかると停止するため、closest()はparents()よりも優れています。

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

クラスmyElemの要素にクラスmyDivの直接の親があるかどうかをテストする場合は、次のテストを使用します

if(!$(".myElem").parent().hasClass("myDiv")) {
    console.log("test")
};
6
Arun P Johny
if($(".myElem").parent().hasClass(".myDiv")) {
    console.log("has a parent with the class .myDiv")
}
else
{
    console.log("no parent class .myDiv found")
}
3
IT ppl

$（ '。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>
1
Marc Nicole

これにより、クラスmyDivを持つ親を持つクラスmyElemを持つ要素が選択されます。

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

または、クラスmyElemを持ち、クラスmyDivを持つ親がない要素を選択する必要があります。

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

これを試してみてください。

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

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

子のクラス名がわかっている場合は、.closest()を使用することをお勧めします。

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