Question

我需要选择父div而不是子，我如何在jQuery中执行此操作。基本上我想创建一个简单的登录框，它应该隐藏当且仅当我点击父div时，如果我点击子div则该框不应该隐藏。
以下是代码。

 jQuery(document).ready(function ()
    {
        jQuery("li.login-link").click(function ()
        {
            jQuery("div#login-container").css("display", "block");
        });
        jQuery("div#login-container not:(div#login-box)").click(function ()
        {
            jQuery("div#login-container").css("display", "none");
        });
    });

<div id="login-container"> <!--parent div. Should hide when i click on this div-->
    <div id="login-box"> <!--child div. Should not hide parent when i click on this-->
        
    </div>
</div>

Answer 1

您可以使用.parent()：https://api.jquery.com/parent/

$('div#login-box').parent()

或

$('div#login-box').parent('div#login-container')

修改

根据您在下面的评论，我认为您是在停止传播之后：https://api.jquery.com/event.stoppropagation/

//hide the box when you click the parent: $('div#login-container').click(function() { $(this).hide() }); // stop child click bubbling up to parent $('div#login-box').click(function(e) { e.stopPropagation(); });

Answer 2

检查一下

HTML：

<div id="login-container">
    <div id="login-box">
        Hi
    </div>
</div>

JS：

$("div#login-box").click(function ()
 {
    $(this).parent().css("background-color","red")
     console.log()
 });

Answer 3

尝试

jQuery(function($) {
  $("#login-container").click(function(e) {
    if (!$(e.target).closest('#login-box').length) {
      $("div#login-container").hide();
    }
  });
});

#login-container {
  border: 1px solid red;
  padding: 20px;
  min-height: 100px;
}
#login-box {
  border: 1px solid green;
  padding: 20px;
  min-height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="login-container">
  <div id="login-box">

  </div>
</div>

jquery select parent not child

3 个答案: