例如,当我想获取元素的三级父级时,$('#element').parent().parent().parent()
是否需要为此编写更好的方法?
例如,当我想获取元素的三级父级时,$('#element').parent().parent().parent()
是否需要为此编写更好的方法?
Answers:
由于parents()返回从最接近外部元素开始排序的祖先元素,因此可以将其链接到eq():
$('#element').parents().eq(0); // "Father".
$('#element').parents().eq(2); // "Great-grandfather".
$('.element').first().parents().eq(num);
[2]
将返回基础DOM元素,使用eq(2)
将返回jQuery对象。
根据您的需要,如果您知道要寻找的父母,可以使用.parents()选择器。
EG: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());
一种更快的方法是直接使用javascript,例如。
var parent = $(innerdiv.get(0).parentNode.parentNode.parentNode);
与链接jQuery .parent()
调用相比,此方法在我的浏览器上的运行速度明显更快。
找不到使用closest()
的答案,当您不知道所需元素的层次数时,我认为这是最简单的答案,因此发布答案:
您可以将closest()
函数与选择器结合使用以获取第一个匹配的元素从元素向上遍历时:
('#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表示祖父母,...
如果您打算重用此功能,则最佳解决方案是制作一个jQuery插件:
(function($){
$.fn.nthParent = function(n){
var $p = $(this);
while ( n-- >= 0 )
{
$p = $p.parent();
}
return $p;
};
}(jQuery));
当然,您可能需要扩展它以允许使用可选的选择器和其他类似的东西。
请注意:这0
为父母使用了基础索引,因此nthParent(0)
与call相同parent()
。如果您希望1
基于索引,请使用n-- > 0
var p = 1 + n; while (p--) { $p = $p.parent(); }
;如果您想更改为基于1的内容,并且Javascript为“ falsey”,则可以使用:while (n--) { $p = $p.parent();}
保存条件检查
nthParent(-2)
怎样?您的示例已损坏。
(function($) { $.fn.nthParent = function(n) { return $(this).parents().eq(n); }; }(jQuery));
parents
对于具有多个元素的选择来说将是不正确的。
var p = n >? (1 + n):1;
而是在这种情况下返回第一个父级,而不是“无”-否则在我的示例中它将中断循环。因此,可能应该是:(function($) { $.fn.nthParent = function(n) { var $p = $(this); if (!(n > -0)) { return $() }; var p = 1 + n; while (p--) { $p = $p.parent(); } return $p; }; }(jQuery));
如果您不想返回任何东西。
如果您有共同的父母div,则可以使用parentUntil()链接
例如: $('#element').parentsUntil('.commonClass')
优点是您无需记住此元素和公共父级(由commonclass定义)之间有多少代。
您可以使用如下形式:
(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()不显示。