检查元素是否为父元素的子元素

javascript jquery css-selectors

2022-08-30 04:37:26

我有以下代码。

<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>

我希望只有在被点击时，才会返回>0。Child-Of-Hello$('div#hello').parents(target).length

但是，每当我点击任何地方时，它就会发生。

我的代码有问题吗？

答案 1

如果您只对直接父级感兴趣，而对其他祖先感兴趣，则可以使用，并为其提供选择器，如中所示。parent()target.parent('div#hello')

示例：http://jsfiddle.net/6BX9n/

function fun(evt) {
    var target = $(evt.target);    
    if (target.parent('div#hello').length) {
        alert('Your clicked element is having div#hello as parent');
    }
}

或者，如果要检查是否有任何匹配的祖先，请使用。.parents()

示例：http://jsfiddle.net/6BX9n/1/

function fun(evt) {
    var target = $(evt.target);    
    if (target.parents('div#hello').length) {
        alert('Your clicked element is having div#hello as parent');
    }
}

答案 2

.has（） 似乎是为此目的而设计的。由于它返回一个jQuery对象，因此您还必须测试：.length

if ($('div#hello').has(target).length) {
   alert('Target is a child of #hello');
}