如果没有，jQuery nearest（）似乎会找到父ID

Question

当用户在窗口中单击时，我有一个事件监听器。我想看看被点击的元素是否具有任何具有特定id的父元素。我使用jQuery nearest（）函数。但它总是回归真实。

这是展示我的代码的fiddle。

必定会出现一些重大错误，因为如果我从if($(event.target).closest('#activatemenu'))更改了ID 进入任何其他身份

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

它仍然返回true。

小提琴代码：

＆＃13;

＆＃13;

$(function() {

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

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


});

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

$(event.target).closest('#activatemenu')将始终返回一个对象，因此如果条件始终为true，请更好地检查$(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 2

您的代码有两个问题。

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 3

Closest总是返回一个解析为truthy的jQuery对象。你需要检查对象的长度。

$(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>