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

115

我有以下代码。

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

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

我的代码有问题吗？

javascript jquery

— Yan仁成
source

160

如果您只对直接父级感兴趣，而对其他祖先不感兴趣，则可以使用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');
    }
}

— 用户名
source

19

没有jQuery怎么办？

— SuperUberDuper

60

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

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

— 开拓者
source

@redanimalwar正确；这就是这样做的。您找到父元素，然后检查它target是否在其中。

— 开拓者

22

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

展开摘要

— 亚历山大·马可夫（Aleksandr Makov）
source

谢谢，这真是太神奇了！递归很酷。我想知道函数的参数如何变成函数操作的对象（内部）。您是否可以找到更多有关此信息的链接？

— JohnK

20

如果您有一个没有特定选择器的元素，并且仍然想检查它是否是另一个元素的后代，则可以使用jQuery.contains（）

jQuery.contains（container，included）
描述：检查DOM元素是否是另一个DOM元素的后代。

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

— 奈蒂希
source

3

要特别注意$.contains采用DOM元素而不是 jQuery实例，否则它将始终返回false。

— aleclarson

需要记住的另一个细节：$.contains如果两个参数是相同的元素，则永远不要返回true。如果需要，请使用domElement.contains(domElement)。

— aleclarson

9

最终使用.closest（）代替。

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

— 卢卡斯
source

3

您只需交换两个术语即可使代码正常工作：

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

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

— tttppp
source

2

var target = $(evt.target);因此您的代码应该阅读if (target.parents('div#hello').length) {而不是...$(target)...

— Peter Ajtai

0

除了其他答案之外，您还可以使用这种鲜为人知的方法来获取某个父对象的元素，如下所示：

$('child', 'parent');

在你的情况下，那将是

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

请注意在孩子和父母之间使用逗号以及它们各自的引号。如果它们被相同的引号引起来

$('child, parent');

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

— 我想要答案
source

这是一个很酷的黑客攻击，但并不能很好地没有IDS的元素，或类工作

— aln447