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

Ответ 1

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

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

Ответ 2

В зависимости от ваших потребностей, если вы знаете, какой родитель вы ищете, вы можете использовать селектор .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());

Ответ 3

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

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

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

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

Ответ 4

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

Ответ 5

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

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

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

Ответ 6

Если вы планируете повторно использовать эту функциональность, оптимальным решением является создание плагина 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

Ответ 7

Просто добавьте селектор :eq() следующим образом:

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

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

Ответ 8

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

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

ex: $(this).ancestors().eq(2) → родительский элемент родительского элемента this.

Ответ 9

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

(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/

Ответ 10

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

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

Ответ 11

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

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

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

Ответ 12

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

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

Ответ 13

Не нашел ответа, используя 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'