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

我有以下密码。

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

然而，只要我点击任何地方，它就会发生。

我的代码有问题吗？

170211 次浏览
小开
最佳答案

如果您只对直接父类感兴趣，而对其他祖先不感兴趣，那么只需使用 parent()，并给它选择器，如 target.parent('div#hello')中所示。

示例: < a href = “ http://jsfiddle.net/6BX9n/”rel = “ norefrer”> 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()。

示例: < a href = “ http://jsfiddle.net/6BX9n/1/”rel = “ norefrer”> 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');
}
}
小开

您可以通过交换这两个术语来使代码工作:

if ($(target).parents('div#hello').length) {

你把孩子和父母带错了方向。

小开

.has() 似乎就是为此而设计的。因为它返回一个 jQuery 对象，所以还必须测试 .length:

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

如果有一个元素没有特定的选择器，并且仍然想检查它是否是另一个元素的后代，那么可以使用 包含()

包含(容器，包含)
描述: 检查一个 DOM 元素是否是另一个 DOM 元素的后代。

可以将父元素和要检查的元素传递给该函数，如果后者是前者的后代，则返回。

小开

最后改用. close ()。

$(document).on("click", function (event) {
if($(event.target).closest(".CustomControllerMainDiv").length == 1)
alert('element is a child of the custom controller')
});
小开

除了其他答案之外，您还可以使用这种不太为人所知的方法来获取某个父元素的元素，例如,

$('child', 'parent');

对你来说，那就是

if ($(event.target, 'div#hello')[0]) console.log(`${event.target.tagName} is an offspring of div#hello`);

请注意在子级和父级之间使用逗号以及它们各自的引号。如果他们被相同的引号包围

$('child, parent');

您将拥有一个同时包含两个对象的对象，而不管它们是否存在于它们的文档树中。

小开

香草1-liner for IE8 + :

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>

小开

要了解更多关于 Aleksandr Makov 的回答的背景信息，查看下面的页面可能会有所帮助。

Https://developer.mozilla.org/en-us/docs/web/api/node/contains

包含()
Node 接口的 include ()方法返回一个布尔值，该值指示一个节点是否是给定节点的后代，即节点本身、它的一个直接子节点(children Nodes)、一个子节点的直接子节点，等等。

这意味着，答案不是使用隐藏函数。

小开

没有 jquery

target.matches()和 :scope

如果您想查看目标元素是否有一个与某个选择器匹配的父元素，可以在目标元素上使用 .matches() 方法，然后传递选择器和 < strong > :scope 伪类。

这里的 :scope引用了目标元素，因此您可以在 < strong > :where 伪类中使用它来帮助您编写一个干净的选择器。

在下面的示例中，我们将匹配作为 a、 button或 summary元素的后代的所有目标元素。

const app = document.getElementById("app");


app.addEventListener("click", (event) => {
if (
event.target.matches(
":where(a, button, summary) :scope"
)
) {
console.log("click", event.target.parentNode.tagName);
}
});
<div id="app">
<button>
<span>Click Me</span>
</button>


<a href="#">
<span>Click Me</span>
</a>
  

<details>
<summary>
<span>Click Me</span>
</summary>
</details>
  

<span>Click Me</span>
<div>

注意，选择器 :where(a, button, summary) :scope也可以写成:

a :scope,
button :scope,
summary :scope

parent.contains()

如果您有兴趣查看目标元素是否是特定元素的子元素，请在潜在的父元素上使用 < a href = “ https://developer.mozilla.org/en-US/docs/Web/API/Node/ 包含”rel = “ noReferrer”> .contains() :

const app = document.getElementById("app");
const button = document.getElementById("button");


app.addEventListener("click", (event) => {
if (button.contains(event.target)) {
console.log("click");
}
});
<div id="app">
<button id="button">
<span>Click Me</span>
</button>
  

<span>Click Me</span>
<div>


提交答案