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> 

Answer 1

您可以使用.parent() ： https : .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>