如何在jQuery中获取元素的第n级父级？

Question

例如,当我想获得元素的第3级父级时,我必须写$('#element').parent().parent().parent()一个更优化的方法吗？

Answer 1

由于parents()返回从最接近外部元素排序的祖先元素,您可以将其链接到eq():

$('#element').parents().eq(0);  // "Father".
$('#element').parents().eq(2);  // "Great-grandfather".

Answer 2

取决于您的需求,如果您知道您寻找的父母可以使用.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());

Answer 3

您可以为目标父级提供id或类(例如myParent),并引用 $('#element').parents(".myParent")

Answer 4

更快的方法是直接使用javascript,例如.

var parent = $(innerdiv.get(0).parentNode.parentNode.parentNode);

在浏览器上运行速度明显快于链接jQuery .parent()调用.

请参阅:http://jsperf.com/jquery-get-3rd-level-parent

Answer 5

使用没有找到任何答案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'