检查元素是否为父级的子级
检查元素是否为父级的子级
提问于 2010-09-21 00:54:15
我有以下代码。
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<div id="hello">Hello <div>Child-Of-Hello</div></div>
<br />
<div id="goodbye">Goodbye <div>Child-Of-Goodbye</div></div>
<script type="text/javascript">
<!--
function fun(evt) {
var target = $(evt.target);
if ($('div#hello').parents(target).length) {
alert('Your clicked element is having div#hello as parent');
}
}
$(document).bind('click', fun);
-->
</script>
</html>我希望只有在单击Child-Of-Hello时，$('div#hello').parents(target).length才会返回>0。
然而，每当我点击任何地方时，它就会发生。
我的代码有什么问题吗？
回答 5
Stack Overflow用户
发布于 2013-06-11 21:31:38
.has()似乎就是为此目的而设计的。因为它返回一个jQuery对象，所以您还必须测试.length：
if ($('div#hello').has(target).length) {
alert('Target is a child of #hello');
}Stack Overflow用户
发布于 2017-11-25 18:58:17
用于IE8+的Vanilla 1-liner：
parent !== child && parent.contains(child);下面是它的工作原理：
function contains(parent, child) {
return parent !== child && parent.contains(child);
}
var parentEl = document.querySelector('#parent'),
childEl = document.querySelector('#child')
if (contains(parentEl, childEl)) {
document.querySelector('#result').innerText = 'I confirm, that child is within parent el';
}
if (!contains(childEl, parentEl)) {
document.querySelector('#result').innerText += ' and parent is not within child';
}<div id="parent">
<div>
<table>
<tr>
<td><span id="child"></span></td>
</tr>
</table>
</div>
</div>
<div id="result"></div>
Stack Overflow用户
发布于 2014-05-01 00:46:51
最终改用.closest()。
$(document).on("click", function (event) {
if($(event.target).closest(".CustomControllerMainDiv").length == 1)
alert('element is a child of the custom controller')
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/3753634
复制相关文章
相似问题
腾讯云开发者
