jQuery closest（）は、存在しない場合に親IDを見つけるように見えます。

Question

ユーザーがウィンドウをクリックしたときのイベントリスナーがあります。クリックされた要素に特定のIDを持つ親要素があるかどうかを確認したい。私はそのためにjQuery closest（）関数を使用します。しかし、それは常に真実を返します。

ここに私のコードを示すfiddleがあります。

私は他のどのID

if($(event.target).closest('#rrrrrrr')) 

へif($(event.target).closest('#activatemenu')) からIDを変更した場合、それはまだtrueを返しますので、いくつかの主要なエラーが存在しなければなりません。フィドルで

コード：

$(function() { 
 

 
\t $(document).click(function(event) { 
 

 
    if($(event.target).closest('#activatemenu')) { 
 
    \t \t \t \t 
 
       $('.wrap').prepend('<p>the clicked element has a parent with the id of activatemenu</p>'); 
 
       }else{ 
 
       \t $('.wrap p').remove(); 
 
       } 
 
    
 
    }); 
 

 

 
});

.stuff{ 
 
    width:300px; 
 
    height:150px; 
 
    border:red 2px solid; 
 
} 
 
.otherstuff{ 
 
    width:400px; 
 
    height:400px; 
 
    background:purple; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="wrap"> 
 
    <div id="activatemenu"> 
 
    <div> 
 
     <div> 
 
     <div class="stuff"> 
 
      <p>Here is some text</p> 
 
     </div> 
 
     
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="otherstuff"> 
 
    <p>Other stuff!</p> 
 
    </div> 
 
</div>

Answer 1

コードには2つの問題があります。

1. まず、activemenuではなく、activatemenuを検索する必要があります。 activatemenuがコードに存在しません。
2. 第2に、jQueryは常に配列を返します。そのため、要素が空でない配列として見つかったかどうかを確認する必要があります。長さをチェックすると、常にtrueが返されます。

作業例については以下を参照してください：

$(function() { 
 
    $(document).click(function(evt) { 
 
     if($(evt.target).closest('#activemenu').length) { 
 
      $('.wrap').prepend('<p>the clicked element has a parent with the id of activemenu</p>'); 
 
     } else { 
 
      $('.wrap p').remove(); 
 
     } 
 
    }); 
 
});

.stuff { 
 
    width: 300px; 
 
    height: 150px; 
 
    border: red 2px solid; 
 
} 
 

 
.otherstuff { 
 
    width: 400px; 
 
    height: 400px; 
 
    background: purple; 
 
}

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 
 
<div class="wrap"> 
 
    <div id="activemenu"> 
 
     <div> 
 
      <div> 
 
       <div class="stuff"> 
 
        <p>Here is some text</p> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="otherstuff"> 
 
     <p>Other stuff!</p> 
 
    </div> 
 
</div>

Answer 2

$(event.target).closest('#activatemenu')条件が常に真となりますので、もし常に$(event.target).closest('#activatemenu').length

$(function() { 
 

 
$(document).click(function(event) { 
 
if($(event.target).closest('#activemenu').length) { 
 

 
      $('.wrap').prepend('<p>the clicked element has a parent with the id of activemenu</p>'); 
 
      }else{ 
 
       $('.wrap p').remove(); 
 
      } 
 

 
    }); 
 

 

 
});

.stuff{ 
 
    width:300px; 
 
    height:150px; 
 
    border:red 2px solid; 
 
} 
 
.otherstuff{ 
 
    width:400px; 
 
    height:400px; 
 
    background:purple; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="wrap"> 
 
    <div id="activemenu"> 
 
<div> 
 
    <div> 
 
    <div class="stuff"> 
 
     <p>Here is some text</p> 
 
    </div> 
 

 
    </div> 
 
</div> 
 
    </div> 
 
    <div class="otherstuff"> 
 
<p>Other stuff!</p> 
 
    </div> 
 
</div>

のために、より良いチェックをオブジェクトを返します。

Answer 3

最も近い常にtruthyに解決jQueryオブジェクトを返します。オブジェクトの長さを確認する必要があります。

$(function() { 
 
    $(document).click(function(event) { 
 
    if ($(event.target).closest('#activemenu').length) { 
 
     $('.wrap').prepend('<p>the clicked element has a parent with the id of activemenu</p>'); 
 
    } else { 
 
     $('.wrap p').remove(); 
 
    } 
 
    }); 
 
});

.stuff { 
 
    width: 300px; 
 
    height: 150px; 
 
    border: red 2px solid; 
 
} 
 

 
.otherstuff { 
 
    width: 400px; 
 
    height: 400px; 
 
    background: purple; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrap"> 
 
    <div id="activemenu"> 
 
    <div> 
 
     <div> 
 
     <div class="stuff"> 
 
      <p>Here is some text</p> 
 
     </div> 
 

 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="otherstuff"> 
 
    <p>Other stuff!</p> 
 
    </div> 
 
</div>