检查元素是否是父级的子元素
我有以下代码。
<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。
然而，只要我点击任何地方就会发生。
我的代码有什么问题吗？
如果你只对直接父对象感兴趣，而对其他祖先不感兴趣，则可以使用parent() ，并将其赋予select器，如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'); } }
.has()似乎是为此目的而devise的。 既然它返回一个jQuery对象，你也必须testing.length ：
if ($('div#hello').has(target).length) { alert('Target is a child of #hello'); }
如果你有一个没有特定select器的元素，并且你还想检查它是否是另一个元素的后代，那么可以使用jQuery.contains（）
jQuery.contains（容器，包含）
说明：检查DOM元素是否是另一个DOM元素的后代。
您可以将父元素和要检查的元素传递给该函数，如果后者是第一个的后代，则返回该元素。
结束使用.closest（）代替。
$(document).on("click", function (event) { if($(event.target).closest(".CustomControllerMainDiv").length == 1) alert('element is a child of the custom controller') });
你可以通过交换这两个术语来让你的代码工作：
if ($(target).parents('div#hello').length) {
你有孩子和父母错误的方式。
除了其他的答案之外，你可以使用这个鲜为人知的方法来获取某个父元素，就像这样，
$('child', 'parent');
在你的情况下，这将是
if ($(event.target, 'div#hello')[0]) console.log(`${event.target.tagName} is an offspring of div#hello`);
注意孩子和父母之间的逗号以及他们单独的引号的使用。 如果他们被相同的引号包围
$('child, parent');
您将拥有一个包含这两个对象的对象，而不pipe它们是否存在于其文档树中。
