.parent().parent().parent()的简写

Question

我有一个jQuery函数,需要获取元素父级的位置.

它看起来像:

   function show(e) {
        //debugger;
           var nextTableSelector = $(e).parent().parent().parent().parent().parent().parent().parent().parent();
  }

遍历DOM结构是否有一个简短的手？

有点像:

$(e).parent()[5];

有什么建议吗？

请注意,这个DOM结构是由第三方JS框架生成的,我无法在此结构中附加任何其他ID或类.我不得不以这种方式通过DOM工作.

Answer 1

所以,你需要的是.closest()或者.parents(),如下所示.

var target = $('#source').closest('#target');
var target = $('#source').parents('#target');
alert ( target[0].id );

以上示例HTML:

<div id="target">
    Man!
    <div>
        <div>
            <div id="source"></div>
        </div>
    </div>
</div>

我建议.closest()作为.parents()向上行进DOM树到文档的根元素,将每个祖先元素到一个临时集合; 然后,如果提供了一个选择器,它会根据选择器过滤该集合,而只.closest()在DOM树中向上移动,直到找到所提供的选择器的匹配为止.

编辑:

至于你的情况,你可能想做:

var n = 5; //say you want the 5th parent
var parent5th = $("#source").parents().eq(n-1);
alert (parent5th[0].id);

//So, your code becomes:
var n = 8; //You want the 8th parent
$(e).parents().eq(n-1);

如果您愿意,这是一个不那么丑陋的功能:

$.fn.nthParent = function(level) {

    level = level || 1;
    if (level <= 0) return;

    return level === 1 &&
        $(this).parent() || 
        $(this).parents().eq(level-1);
}

用法:

//Apply some CSS to level 1 (immediate) parent
$("#source").nthParent().css({
    border: "1px solid red"
});

OR

$(".source").each(function(i) {
    $(this).nthParent(i+1).css({
        border: "4px solid blue"
    });
});

以上演示.

Answer 2

如果您无法专门识别所需的元素，但您知道它是第五个父元素，则可以按照您的建议进行$(e).parents().eq(5)操作$(e).parents()[5]。