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

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

13 126
javascript jquery transparent

13 ответов:

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

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

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

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

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

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

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

см.:http://jsperf.com/jquery-get-3rd-level-parent

6

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

5

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

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

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

2

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

2

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

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

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

2

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

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

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

1

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

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

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

1

не нашел ответа с помощью 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'
1

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

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

0

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

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

0

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

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