如何使用jQuery获取html中祖父母的祖父母

时间:2012-02-05 15:01:04

标签: javascript jquery html

有没有更好的方法来获得父母的父母的父母...像5次?

所以不要使用它:

$(this).parent().parent().parent().parent().parent()

我可以使用这样的东西:

$(this).goBacktoNthParent(5);

有可能吗?

6 个答案:

答案 0 :(得分:11)

使用:eq()选择器

:eq()选择器允许您在匹配的集合的从零开始的索引处定位元素...

$(this).parents(':eq(4)')

注意:使用父选择器

因为选择器基于零,所以我们给它少了一个目标数字。

DEMO: http://jsfiddle.net/pmMFv/


使用.eq()方法

.eq()方法实际上与其选择对应方法相同,允许您在匹配的集合的从零开始的索引处定位元素...

$(this).parents().eq(4)

注意:使用父选择器

DEMO: http://jsfiddle.net/pmMFv/2/


在循环中使用parentNode

为了获得最佳性能,我们可以使用元素的.parentNode属性,并在循环中运行它,每次都使用最新的父级更新变量...

var el = this, i = 5;
while(i-- && (el = el.parentNode));

$(el)

DEMO: http://jsfiddle.net/pmMFv/1/

答案 1 :(得分:4)

您可以轻松创建自己的功能:

function getNthParentOf(elem,i) {
    while(i>0) {
        elem = elem.parent();
        i--;
    }
    return elem;
}

var something = getNthParentOf($(this),5);

答案 2 :(得分:3)

您可以将.parents遍历功能与:nth()选择器结合使用。

所以结果将是:

$(this).parents(':nth(5)'));

注意: :nth()索引从0开始,因此对于您的情况应该是:

$(this).parents(':nth(4)'));

答案 3 :(得分:2)

如果您要获取的父元素上有识别标记,例如idclass,您可以使用$(this).closest("#grandparentElement")

答案 4 :(得分:1)

希望,这会有所帮助。

尝试使用.parentsUntil()

工作示例:http://jsfiddle.net/ylokesh/wLhcA/

答案 5 :(得分:0)

你可以尝试

var parentControl = $('#yourcontrol').parent();
var grandParent = parentControl.parent();