jQuery的最接近（）似乎沒有找到父ID時，沒有

Question

我有一個事件監聽器，當用戶在窗口中單擊。我想看看點擊的元素是否有任何具有特定ID的父元素。我使用jQuery的nearest（）函數。但它總是返回真實。

這是演示我的代碼的fiddle。

必須有一些重大的錯誤，因爲如果我改變從if($(event.target).closest('#activatemenu')) 標識加入任何其他ID

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

它仍然返回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

您的代碼有兩個問題。

1. 首先，您需要搜索最近的activemenu而不是activatemenu。您的代碼中不存在activatemenu。
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

最近總是返回一個jQuery對象解析爲truthy。你需要檢查對象的長度。

$(event.target).closest('#rrrrrrr').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>