Как получить родителя n-го уровня элемента в jQuery?

Когда я хочу получить, например, 3-го уровня родителя элемента, я должен написать $('#element').parent().parent().parent()Есть ли более оптимальный метод для этого?

Так как parent () возвращает элементы-предки, упорядоченные от ближайших к внешним, вы можете связать их в eq () :

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

Зависит от ваших потребностей, если вы знаете, какого родителя вы ищете, вы можете использовать селектор .parents ().

Например: 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());

Вы можете дать целевому родителю идентификатор или класс (например, myParent), а ссылка на $('#element').parents(".myParent")

Более быстрый способ - использовать javascript напрямую, например.

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

Это работает значительно быстрее в моем браузере, чем цепочка .parent()вызовов jQuery .

Смотрите: http://jsperf.com/jquery-get-3rd-level-parent

Не нашел никакого ответа с помощью, 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'

Это просто. Просто используйте

$(selector).parents().eq(0); 

где 0 - родительский уровень (0 - родительский, 1 - родительский и т. д.)

Просто добавьте :eq()селектор вот так:

$("#element").parents(":eq(2)")

Вы просто указываете, какой родитель: 0 для непосредственного родителя, 1 для деда, ...

Если вы планируете использовать эту функциональность повторно, оптимальным решением будет создать плагин jQuery:

(function($){
$.fn.nthParent = function(n){
  var $p = $(this);
  while ( n-- >= 0 )
  {
    $p = $p.parent();
  }
  return $p;
};
}(jQuery));

Конечно, вы можете расширить его, чтобы включить дополнительный селектор и другие подобные вещи.

Одно замечание: здесь используется 0основанный индекс для родителей, так nthParent(0)же, как и вызов parent(). Если вы предпочитаете 1индексирование на основе, используйтеn-- > 0

Если у вас есть общий родительский DIV можно использовать parentsUntil () ссылка

например: $('#element').parentsUntil('.commonClass')

Преимущество заключается в том, что вам не нужно запоминать, сколько поколений существует между этим элементом и общим родителем (определяется общим классом).

Вы также можете использовать:

$(this).ancestors().eq(n) 

пример: $(this).ancestors().eq(2)-> родитель родителя this.

Вы можете использовать что-то вроде этого:

(function($) {
    $.fn.parentNth = function(n) {
        var el = $(this);
        for(var i = 0; i < n; i++)
            el = el.parent();

        return el;
    };
})(jQuery);

alert($("#foo").parentNth(2).attr("id"));

http://jsfiddle.net/Xeon06/AsNUu/

использование eq похоже для захвата динамического DOM, а использование .parent (). parent () - для захвата DOM, который был изначально загружен (если это вообще возможно).

Я использую их оба для элемента, к которому применены классы для onmouseover. eq показывает классы, а .parent (). parent () - нет.

Как родители () возвращает список, это также работает

$('#element').parents()[3];