jquery select parent not child

我需要選擇父div而不是child，我該如何在jQuery中做到這一點。基本上我想創建一個簡單的登錄框，它應該隱藏當且僅當我點擊父div時，如果我點擊子div不應該隱藏。
以下是代碼。jquery select parent not child

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>

來源

2015-07-10 Gyan Parkash

對不起你什麼意思？因爲你有一個ID ......用它來選擇元素 –

我的要求是，當我點擊的div＃登錄容器它會（＃登錄框） –

您可以使用.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(); 
});

來源

2015-07-10 08:14:25 Pete

其實我想隱藏登錄容器只有當父（div＃登錄容器）被點擊而不是孩子（div＃登錄框）點擊事件 –

@GyanParkashm，請參閱編輯我的回答 – Pete

感謝夥計它的工作原理，這正是我想要的 –

檢查這一項

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

來源

2015-07-10 08:20:44

嘗試

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>

來源

2015-07-10 08:39:01

jquery select parent not child

回答

相關問題