Question

我正在实现jQuery，并在我的代码库中取出Prototype库，我想知道你是否可以给我最好的方法在jQuery中实现这个功能。我熟悉jQuery祖先>后代语法，但只想检查一个元素是否是true的后代，如下面的代码：有人可以为我提供最有效的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

Answer 1

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

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

其他一些答案要求您按ID引用元素，如果您拥有的只是没有ID的DOM元素，则无效。此外，如果您想确保targetElt是parentElt的严格后代（换句话说，您不希望将parentElt计为其自己的后代），请确保在通话前添加targetElt != parentElt检查至.closest()，或使用.parents().find()，如Jonathan Sampson所建议的那样。

Answer 2

使用jQuery＆gt; = 1.4（2010），你可以使用非常快的函数jQuery.contains()

此静态方法适用于DOM元素，而不是jQuery元素，并返回true或false。

jQuery.contains( container, descendant )

示例：要检查文档中是否有元素，您可以执行此操作：

jQuery.contains( document.body, myElement )

<强>更新

自ie5 +支持以来，所有浏览器都有一个原生DOM方法Node.contains()。所以你可以在没有jQuery的情况下做到这一点：

document.body.contains( myElement )

Answer 3

我认为你可以在这里利用CSS样式选择，返回长度..

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

不完全是真/假，但将0/1作为布尔值检查应该有效。：）

或者，你可以做一些像$（'＃parent'）。find（'＃child'）并查看那里的长度。

Answer 4

怎么样


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

Answer 5

您可以使用is()功能，如下所示：

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

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

Answer 6

$.fn.descendantOf = function(element) {
    element = $(element)[0];
    var current = this;
    var body    = document.body;
    while (current && current != element && current != document.body) {
        current = $(current).parent()[0];
    }
    if (typeof(current) == "undefined" || typeof(current) == "null") {
        return false;
    } else if (current == element) {
        return true;
    } else if (current == document.body) {
        return false;
    }
}

示例：

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

和

$('#foo').descendantOf('#bar');  // false
$('#foo').descendantOf('#foo');  // false
$('#foo').descendantOf(document.body);  // true
$('#bar').descendantOf('#foo');  // true
$('#baz').descendantOf('#foo');  // true

Answer 7

您可以在元素.find()

中尝试.children()它

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

或相反的方向：

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

Answer 8

我找到的最佳方法是使用Dan G. Switzer，II的方法在这里找到： http://blog.pengoworks.com/index.cfm/2008/9/24/Using-jQuery-to-determine-if-an-element-is-a-child-of-another-element

jQuery.fn.isChildOf = function(b){ 
    return (this.parents(b).length > 0); 
};

然后你只需使用插件：

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

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

Answer 9

nearest（）的替代方法，它使用（几乎）相同的遍历原则，但不包括元素本身：child.parentsUntil(ancestor).last().parent().is(ancestor)。

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

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

Answer 10

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

这应该有效。

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

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

Answer 11

假设在：

中重写您的初始陈述

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

尝试插件：

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

找出元素是否是另一个元素的后代的最佳方法

11 个答案: