Як отримати батьківський елемент елемента n-го рівня в jQuery?

Коли я хочу отримати, наприклад, батько 3-го рівня елемента, який я повинен написати, $('#element').parent().parent().parent()чи є для цього більш оптимальний метод?

Оскільки батьки () повертають впорядковані предки елементи з найближчих до зовнішніх, ви можете ланцюжок в eq () :

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

Залежить від ваших потреб, якщо ви знаєте, якого з батьків шукаєте, ви можете скористатися перемикачем .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());

Ви можете дати цільовому батькові ідентифікатор або клас (наприклад, 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

Якщо у вас є спільний родительський розділ, ви можете скористатися посиланням parentUntil ()

наприклад: $('#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 () doesnt.

Коли батьки () повертають список, це також працює

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