在 JavaScript 或 Jquery 中测试对象的祖先/后代关系答案

【问题标题】：Testing objects for ancestor/descendent relationship in JavaScript or Jquery在 JavaScript 或 Jquery 中测试对象的祖先/后代关系
【发布时间】：2008-11-13 18:59:08
【问题描述】：

我正在尝试提出一个可重用的 JS 或 jQuery 函数，它可以让我测试一个对象是否是另一个对象的 DOM 后代。

我看过一个测试模型

$b.parents('nodename').length>0

当您只需要检查一个元素是否是该名称的任何节点的子节点时，这真是太棒了。

但是特定节点呢？你不能测试

$b.parents($a).length>0

因为 jQuery 父级将节点名表达式作为参数来过滤。

作为一点背景知识，我正在尝试测试文档点击事件的目标是否是特定对象的子对象。例如，如果 event.target 是 $b 的子级，则返回 true，否则返回 false。但这个函数稍后可能会产生其他影响。

谢谢！

【问题讨论】：

标签： javascript jquery dom

【解决方案1】：

a.contains(b)

这是一个使用 Node.contains 的纯 JavaScript 解决方案。该函数具有包容性，a.contains(a) 的计算结果为 true。

IE9 中有一个极端情况：如果b 是文本节点，contains 将始终返回 false。

【讨论】：

这太棒了！这个对我有用。我总是更喜欢纯 JS 而不是框架。

【解决方案2】：

在jQuery ancestors using jQuery objects我建议

if ($(obj1).parents().index($(obj2)) >= 0) {
    // obj1 is a descendant of obj2
}

【讨论】：

完美。这实际上允许传递一个对象而不是选择器，这太棒了。再次感谢！
你可以将一个解包的 DOM 元素传递给索引，所以这可以简化为 if ($(obj1).parents().index(obj2) >= 0)
现在有一个 $.contains，如果您担心 Node.contains。

【解决方案3】：

试试这个：

$('#foo').filter(function(){

   return $(this).parent().is('#foo-parent');

});

所以这里我们选择所有 foo 元素，然后只过滤以 foo-parent 作为其直接父级的元素。

如果您要查找当前对象的任何祖先是否符合规则，那么我想应该是：

$('#foo').filter(function(){

   return $(this).parents().is('#foo-parent');

});

【讨论】：