首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >检查元素是否为父级的子级

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

Stack Overflow用户
提问于 2010-09-21 00:54:15
回答 5查看 155.2K关注 0票数 120

我有以下代码。

代码语言:javascript
复制
<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。

然而,每当我点击任何地方时,它就会发生。

我的代码有什么问题吗?

EN

回答 5

Stack Overflow用户

发布于 2013-06-11 21:31:38

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

代码语言:javascript
复制
if ($('div#hello').has(target).length) {
   alert('Target is a child of #hello');
}
票数 72
EN

Stack Overflow用户

发布于 2017-11-25 18:58:17

用于IE8+的Vanilla 1-liner:

代码语言:javascript
复制
parent !== child && parent.contains(child);

下面是它的工作原理:

代码语言:javascript
复制
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';
}
代码语言:javascript
复制
<div id="parent">
  <div>
    <table>
      <tr>
        <td><span id="child"></span></td>
      </tr>
    </table>
  </div>
</div>
<div id="result"></div>

票数 28
EN

Stack Overflow用户

发布于 2014-05-01 00:46:51

最终改用.closest()。

代码语言:javascript
复制
$(document).on("click", function (event) {
    if($(event.target).closest(".CustomControllerMainDiv").length == 1)
    alert('element is a child of the custom controller')
});
票数 10
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/3753634

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档