jQuery选择父元素而不是子元素

Question

我需要选择父级div而不是子级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>

- Gyan Parkash

---

抱歉，你是什么意思... 既然你有一个 ID ... 那就用它来选择元素。 - Arun P Johny

我的要求是，当我点击div#login-container时，它会被隐藏，而不是在子元素(#login-box)的点击事件中隐藏。 - Gyan Parkash

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();
});

- Pete

---

实际上，我想在父元素(div#login-container)被点击时才隐藏登录容器(login-container)，而不是在子元素(div#login-box)被点击时隐藏。 - Gyan Parkash

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()
 });

- RIYAJ KHAN

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>

- Arun P Johny