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才会返回＆gt; 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

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

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

Answer 3

如果您的元素没有特定的选择器而您仍想检查它是否是其他元素的后代，则可以使用jQuery.contains()

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

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

Answer 4

使用.closest（）结束。

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

Answer 5

IE8 +的香草1线：

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 6

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

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

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

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

6 个答案: