javascript - .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 结构是由第 3 方 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"
    });
});

A Demo对于以上内容。