例如,当我想获得元素的第3级父级时,我必须编写$('#element').parent().parent().parent()
是否有更优化的方法?
你也可以用:
$(this).ancestors().eq(n)
例如:$(this).ancestors().eq(2)
- > this
父母的父母。
你可以使用这样的东西:
(function($) {
$.fn.parentNth = function(n) {
var el = $(this);
for(var i = 0; i < n; i++)
el = el.parent();
return el;
};
})(jQuery);
alert($("#foo").parentNth(2).attr("id"));
使用eq似乎抓住了动态DOM,而使用.parent()。parent()似乎抓住了最初加载的DOM(如果可能的话)。
我将它们都用在一个元素上,该元素将类应用于onmouseover。 eq显示类,而.parent()。parent()不是。
由于parents()返回一个列表,这也有效
$('#element').parents()[3];
取决于您的需求,如果您知道您寻找的父母可以使用.parents()选择器。
E.G:http://jsfiddle.net/HenryGarle/Kyp5g/2/
<div id="One">
<div id="Two">
<div id="Three">
<div id="Four">
</div>
</div>
</div>
</div>
var top = $("#Four").parents("#One");
alert($(top).html());
使用索引的示例:
//First parent - 2 levels up from #Four
// I.e Selects div#One
var topTwo = $("#Four").parents().eq(2);
alert($(topTwo ).html());
您可以为目标父级提供id或类(例如myParent),并使用$('#element').parents(".myParent")
进行引用
更快的方法是直接使用javascript,例如。
var parent = $(innerdiv.get(0).parentNode.parentNode.parentNode);
在浏览器上运行速度明显快于链接jQuery .parent()
调用。
如果您打算重用此功能,最佳解决方案是制作jQuery插件:
(function($){
$.fn.nthParent = function(n){
var $p = $(this);
while ( n-- >= 0 )
{
$p = $p.parent();
}
return $p;
};
}(jQuery));
当然,您可能希望扩展它以允许可选的选择器和其他类似的东西。
一个注意事项:这为父母使用基于0
的索引,因此nthParent(0)
与调用parent()
相同。如果您更喜欢基于1
的索引,请使用n-- > 0
如果你有一个共同的父div,你可以使用parentsUntil()link
例如:$('#element').parentsUntil('.commonClass')
优点是您不必记住此元素与公共父级(由commonclass定义)之间存在多少代。
这很简单。只是用
$(selector).parents().eq(0);
其中0是父级别(0是父级,1是父级父级等)
没有找到任何使用closest()
的答案,我认为这是最简单的答案,当你不知道所需元素有多少级别时,所以发布答案:
你可以使用closest()
函数和selectors来获得从元素向上遍历时匹配的第一个元素:
('#element').closest('div') // returns the innermost 'div' in its parents
('#element').closest('.container') // returns innermost element with 'container' class among parents
('#element').closest('#foo') // returns the closest parent with id 'foo'
只需添加:eq()
选择器,如下所示:
$("#element").parents(":eq(2)")
您只需指定索引哪个父级:0表示直接父级,1表示祖父级,...