Javascript 检查元素是否是父元素的子元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3753634/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Check if an element is a child of a parent
提问by Cheok Yan Cheng
I have the following code.
我有以下代码。
<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>
I expect only when Child-Of-Hellobeing clicked, $('div#hello').parents(target).lengthwill return >0.
我希望只有在Child-Of-Hello被点击时，$('div#hello').parents(target).length才会返回 >0。
However, it just happen whenever I click on anywhere.
但是，只要我点击任何地方，它就会发生。
Is there something wrong with my code?
我的代码有问题吗？
回答by user113716
If you are only interested in the direct parent, and not other ancestors, you can just use parent(), and give it the selector, as in target.parent('div#hello').
如果您只对直接父级感兴趣，而不对其他祖先感兴趣，则可以使用parent(), 并为其提供选择器，如target.parent('div#hello').
Example:http://jsfiddle.net/6BX9n/
示例：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');
}
}
Or if you want to check to see if there are any ancestors that match, then use .parents().
或者，如果您想检查是否有任何匹配的祖先，请使用.parents().
Example:http://jsfiddle.net/6BX9n/1/
示例：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');
}
}
回答by Blazemonger
回答by Aleksandr Makov
Vanilla 1-liner for IE8+:
适用于 IE8+ 的 Vanilla 1-liner：
parent !== child && parent.contains(child);
Here, how it works:
在这里，它是如何工作的：
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>回答by naitsirch
If you have an element that does not have a specific selector and you still want to check if it is a descendant of another element, you can use jQuery.contains()
如果你有一个没有特定选择器的元素，但你仍然想检查它是否是另一个元素的后代，你可以使用jQuery.contains()
jQuery.contains( container, contained )
Description: Check to see if a DOM element is a descendant of another DOM element.
jQuery.contains( container, contains )
描述：检查一个 DOM 元素是否是另一个 DOM 元素的后代。
You can pass the parent element and the element that you want to check to that function and it returns if the latter is a descendant of the first.
您可以将父元素和要检查的元素传递给该函数，如果后者是第一个的后代，则它返回。
回答by Lukas
Ended up using .closest() instead.
最终使用 .closest() 代替。
$(document).on("click", function (event) {
if($(event.target).closest(".CustomControllerMainDiv").length == 1)
alert('element is a child of the custom controller')
});
回答by tttppp
You can get your code to work by just swapping the two terms:
您只需交换两个术语即可使您的代码工作：
if ($(target).parents('div#hello').length) {
You had the child and parent round the wrong way.
你让孩子和父母走错了路。
回答by I Want Answers
In addition to the other answers, you can use this less-known method to grab elements of a certain parent like so,
除了其他答案之外，您还可以使用这种鲜为人知的方法来抓取某个父元素的元素，如下所示，
$('child', 'parent');
In your case, that would be
在你的情况下，那将是
if ($(event.target, 'div#hello')[0]) console.log(`${event.target.tagName} is an offspring of div#hello`);
Note the use of commas between the child and parent and their separate quotation marks. If they were surrounded by the same quotes
请注意在子级和父级之间使用逗号及其单独的引号。如果它们被相同的引号包围
$('child, parent');
you'd have an object containing both objects, regardless of whether they exist in their document trees.
无论它们是否存在于文档树中，您都会有一个包含这两个对象的对象。
