找出元素是否是另一个元素的后裔的最佳方法
我正在实施jQuery，并在我的代码库中取出Prototype库，我想知道如果你能给我最好的方式来实现jQuery中的这个function。 我熟悉的jQuery的祖先>后裔的语法，但只是想检查一下，如果一个元素是虚假的，如下面的代码的后裔：有人可以给我最有效的jQuery解决scheme吗？
<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
我想你可以利用这里的CSS样式select，返回的长度..
$('#australopithecus #homo-sapiens').length // Should be 1 $('#homo-sapiens #homo-herectus').length // Should be 0
不完全是真/假，但检查0/1作为布尔应该工作。 🙂
或者，你可以做一些像$（'＃parent'）。find（'＃child'）并检查那里的长度。
在jQuery 1.6中，您可以使用以下代码，例如targetElt和parentElt都可以是DOM元素或jQuery包装的对象，也可以是select器：
$(targetElt).closest(parentElt).length > 0
其他一些答案要求你通过它们的ID来引用元素，如果你所拥有的只是一个没有ID的DOM元素的话，这是没有用的。 另外，如果你想确保targetElt是parentElt的严格后代（换句话说，你不想把parentElt作为自己的后代），请确保在调用之前添加一个targetElt != parentElt检查.closest() ，或者像Jonathan Sampson所说的那样使用.parents().find() 。
使用jQuery> = 1.4（2010），您可以使用非常快速的函数jQuery.contains（）
这个静态方法使用DOM元素，而不是使用jQuery元素，并返回true或false 。
jQuery.contains( container, descendant )
例如：要检查一个元素是否在文档中，你可以这样做：
jQuery.contains( document.body, myElement )
更新：
还有一个原生的DOM方法Node.contains（） ，即ie5 +支持的所有浏览器。 所以你可以做到没有jQuery：
document.body.contains( myElement )
怎么样
$("#homo-herectus").parents().is("#australopithecus");
你可以像这样使用is()函数：
alert($('#homo-sapiens').is('#australopithecus *')); // -> true alert($('#homo-herectus').is('#homo-sapiens *')); // -> false
$.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
我发现最好的方法是使用Dan G. Switzer，II的方法在这里find： http : //blog.pengoworks.com/index.cfm/2008/9/24/Using-jQuery-to-determine-if-an-element -is-A-儿童的，另一种元素
jQuery.fn.isChildOf = function(b){ return (this.parents(b).length > 0); };
那么你只需要使用插件：
$('homo-sapiens').isChildOf('australopithecus'); // -> true $('homo-herectus').isChildOf('homo-sapiens'); // -> false
您可以尝试在元素.find()中.find() .children()
$("#lucy").find("#homo-erectus").length;
或者相反的方向：
$("#homo-erectus").parents().find("#lucy").length;
另一种使用（几乎）相同遍历原则的child.parentsUntil(ancestor).last().parent().is(ancestor)不包含元素本身： child.parentsUntil(ancestor).last().parent().is(ancestor) 。
var child = $('#homo-sapiens'); var ancestor = $('#australopithecus'); console.log(child.parentsUntil(ancestor).last().parent().is(ancestor)); // true
function descendantOf(parentId, childId) { return ( $('#'+parentId+' > #'+childId).length === 1 ); }
这应该工作。
正如在下面的评论中指出的，如果你不希望它只是直接的后代：
function descendantOf(parentId, childId) { return ( $('#'+childId, $('#'+parentId)).length === 1 ); }
假设在以下内容中重写您的初始语句：
$('#homo-sapiens').descendantOf('#australopithecus');
尝试插件：
(function($) { $.fn.descendantOf = function(parentId) { return this.closest(parentId).length != 0; } })(jQuery)
