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

Question

我有以下代码。

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

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

我的代码有问题吗？

Answer 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');
    }
}

Answer 2

您只需交换两个术语即可让您的代码工作：

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

你让孩子和父母走错了路。

Answer 3

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

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

Answer 4

如果你有一个没有特定选择器的元素，但你仍然想检查它是否是另一个元素的后代，你可以使用jQuery.contains()

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

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

Answer 5

最终改用 .closest()。

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

Answer 6

除了其他答案，你还可以像这样使用这种鲜为人知的方法来抓取某个父级的元素，

$('child', 'parent');

在你的情况下，那将是

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

注意子级和父级之间使用逗号及其单独的引号。如果它们被相同的引号包围

$('child, parent');

您将拥有一个包含这两个对象的对象，无论它们是否存在于它们的文档树中。

Answer 7

适用于 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>

Answer 8

要了解Aleksandr Makov's answer 的更多背景信息，查看以下页面可能会有所帮助。

https://developer.mozilla.org/en-US/docs/Web/API/Node/contains

Node.contains()
Node 接口的 contains() 方法返回一个布尔值，指示节点是否是给定节点的后代，即节点本身、其直接子节点之一（childNodes）、子节点的直接子节点之一，等等.

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

Answer 9

没有 jquery

target.matches() 和 :scope

如果您想查看目标元素是否有与某些选择器匹配的父元素，请使用目标上的.matches() method 并传递选择器，后跟:scope pseudo class。

这里的:scope 指的是目标元素，因此您可以使用:where pseudo class 中的@ 来帮助您编写一个干净的选择器。

在下面的示例中，我们将匹配作为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()

如果您有兴趣查看目标元素是否是特定元素的子元素，请在潜在父元素上使用 .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>