找出元素是否是另一個後裔的最佳方法

Question

我正在實現jQuery，並在我的代碼庫中取出Prototype庫，我想知道是否可以給我最好的方法來實現此功能jQuery的。 我熟悉jQuery祖先>後代的語法，但只是想檢查一個元素是否爲真的後代，如下面的代碼： 有人可以給我最有效的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

我想你可以利用CSS樣式選擇這裏，與所返回的長度。

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

不完全是/ false，但檢查0/1作爲布爾應該工作。 :)

或者，你可以做一些像$（'＃parent'）。find（'＃child'）並檢查那裏的長度。

Answer 2

你可以嘗試.find()它的元素.children()

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

或者相反的方向：

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

Answer 3

如何

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

Answer 4

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

這應該有效。

正如有人指出，在下面的評論，如果你不希望它只是直接後裔：

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

Answer 5

可以使用is()功能，像這樣：

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

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

Answer 6

假設重寫您最初的聲明：

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

嘗試插件：

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

Answer 7

$.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 8

在jQuery的1.6，你可以一般使用下面的代碼，例如targetElt和parentElt既可以是DOM元素或jQuery的包裹的物體，以及選擇：

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

一些其他的答案需要你通過它們的ID，如果你所有的這是不是有用的參考元素是一個沒有ID的DOM元素。此外，如果您想確保targetElt是parentElt的嚴格後代（換句話說，您不希望將parentElt作爲自己的後代），請務必在致電.closest()之前添加targetElt != parentElt支票，或者正如Jonathan Sampson所建議的那樣使用.parents().find()。

Answer 9

，我發現用丹G.瑞士人最好的方法，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 10

使用jQuery> = 1.4（2010）你可以使用非常快的功能jQuery.contains()

這個靜態方法適用於DOM元素，而不適用於jQuery元素a nd返回true或false。

jQuery.contains(container, descendant) 

例如：要檢查是否有元素在文檔中，你可以這樣做：

jQuery.contains(document.body, myElement) 

更新：

還有一個原生的DOM方法Node.contains()，由於所有的瀏覽器ie5 +支持。所以，你可以不用jQuery的：

document.body.contains(myElement) 

Answer 11

最接近的替代（）使用（幾乎）同樣橫移原理，不包括該元素本身：child.parentsUntil(ancestor).last().parent().is(ancestor)。

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

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