Jquery 确定元素是否是另一个元素的后代的最佳方法

我正在实现jQuery，并在我的代码库中提取原型库，我想知道您是否可以给我在jQuery中实现此功能的最佳方法。 我熟悉jQuery祖先

>

后代语法，但只想通过true或false检查元素是否为后代，如下代码所示： 有人能为我提供最有效的jQuery解决方案吗

<div id="australopithecus">
  <div id="homo-herectus">
    <div id="homo-sapiens"></div>
  </div>
</div>

$('homo-sapiens').descendantOf('australopithecus');
// -> true

$('homo-herectus').descendantOf('homo-sapiens');
// -> false

$（‘智人’）。南方古猿的后代；
//->对
$（‘智人’）。智人的后代；
//->错误

您可以尝试在元素

.children（）

或相反方向：

$("#homo-erectus").parents().find("#lucy").length;

怎么样

$("#homo-herectus").parents().is("#australopithecus");

这应该行得通

正如下面的评论所指出的，如果您不希望它只是直系后代：

function descendantOf(parentId, childId) {
   return ( $('#'+childId, $('#'+parentId)).length === 1 );
}

---

我认为您可以利用CSS样式选择，返回长度

$('#australopithecus #homo-sapiens').length // Should be 1
$('#homo-sapiens #homo-herectus').length // Should be 0

不完全正确/错误，但将0/1作为布尔值检查应该有效。：）

或者，您可以执行类似$（“#parent”）的操作。查找（“#child”）并检查其中的长度。

您可以像这样使用

is（）

函数：

alert($('#homo-sapiens').is('#australopithecus *'));
// -> true

alert($('#homo-herectus').is('#homo-sapiens *'));
// -> false

---

假设要在中重写您的初始语句：

$('#homo-sapiens').descendantOf('#australopithecus');

尝试使用以下插件：

(function($) {
    $.fn.descendantOf = function(parentId) {
        return this.closest(parentId).length != 0;
    }
})(jQuery)

例如：

<div id="foo">
    <div id="bar">
        <div id="baz"></div>
    </div>
</div>

---

在jQuery 1.6中，您可以通用地使用以下代码，例如targetElt和parentElt都可以是DOM元素或jQuery包装的对象，也可以是选择器：

$(targetElt).closest(parentElt).length > 0

---

其他一些答案要求您通过元素的ID引用元素，如果您只有一个没有ID的DOM元素，那么这是没有用的。此外，如果您想确保targetElt是parentElt的严格后代（换句话说，您不想将parentElt算作自己的后代），请确保添加一个

targetElt！=parentElt

在调用

.closest（）

之前检查，或者按照乔纳森·桑普森的建议使用

.parents（）.find（）

。

我发现的最佳方法是使用Dan G.Switzer，II的方法如下：

那么您只需将插件用作：

$('homo-sapiens').isChildOf('australopithecus');
// -> true

$('homo-herectus').isChildOf('homo-sapiens');
// -> false

JQuery 使用jQuery>=1.4（2010），您可以使用非常快速的函数

此静态方法使用DOM元素，而不是jQuery元素，并返回

true

或

false

jQuery.contains( container, descendant )

示例：要检查文档中是否存在元素，可以执行以下操作：

jQuery.contains( document.body, myElement )

原生DOM 还有一个自ie5+以来所有浏览器都支持的本机DOM方法。因此，您可以在不使用jQuery的情况下执行此操作：

document.body.contains( myElement )

使用（几乎）相同遍历原则且不包含元素本身的最近（）的替代方法：

child.parentsUntil（祖先）。last（）.parent（）.is（祖先）

---

我不知道jQuery语法，但检查子项的父项（）会更快，而不是检查祖先的所有子项，对吗？@harpo，可能是这样。取决于用户的特定DOM。好的建议——当然是要考虑的。DUPE：使用<代码> jQuery。请参阅下面我的答案。在选择器中使用>字符将限制检查仅限于第一代Decdendant。如果您想查看它是否是任何类型的后代（与直系后代相反），只需删除>字符即可。感谢所有好的答案！！我不知道我有这么多选择：）谢谢！您可以通过在

前面加上前缀，将它们“强制”为
true
/
false
，就像
$（“#南方古猿#智人”）.length
，它返回
true
。没有必要将这些值转换为其他任何值，因为在javascript中，如果在if语句中使用false，则0、null和NaN都被视为false……如果您真的想获得技术性，则更重要的是这些值在比较中被强制为truthy或falsy值。它在
if
语句或其他条件中并不特别明确。例如，如果您正在与
true
进行严格的比较，您可能希望使用
将其强制为正确的布尔值。尽管如此，很少有人会进行如此严格的检查值得一提的是，提供的关于使用
的答案。在这一点上，与此处提出的问题最接近的
是一个更好的答案。您不认为使用*（asterix）太昂贵，因为它会在第一次匹配时检查所有儿童吗？这应该是公认的答案。这个问题和dup中的所有其他答案都需要知道ID/类。这一条对所有这些都是完全透明的，因为0是错误的，所以您可以简单地使用$（targetElt）.closest（parentElt）.length作为条件。（即不检查长度>0）这仅确定单个级别的descendance@MildFuzz我很肯定你错了
parents（）
遍历树的所有路径以查找匹配项
typeof
不是一个函数，而是一个关键字。您不需要括号，尽管它仍然有效
typeof current==“undefined”
您可以通过添加“[0]”从对象中提取DOM元素来使用jQuery对象->这是最好的答案，它不依赖具有唯一选择器的元素，更重要的是，它提供了一个非jQuery解决方案。
jQuery.fn.isChildOf = function(b){ 
    return (this.parents(b).length > 0); 
};

$('homo-sapiens').isChildOf('australopithecus');
// -> true

$('homo-herectus').isChildOf('homo-sapiens');
// -> false

jQuery.contains( container, descendant )

jQuery.contains( document.body, myElement )

document.body.contains( myElement )

var child = $('#homo-sapiens');
var ancestor = $('#australopithecus');

console.log(child.parentsUntil(ancestor).last().parent().is(ancestor)); // true