.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或类。我被困在这条路上了。

Answer 1

如果您不能完全标识您想要的元素，但您知道它是第五个父元素，那么您可以按照您的建议执行$(e).parents().eq(5)或$(e).parents()[5]。

Answer 2

因此，您需要的是.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。

Answer 3

您可以使用.closest()而不是parent().parent()，然后您将使用最接近的元素，而不管它在DOM结构中的位置有多远。