Когда я хочу получить, например, 3-го уровня родителя элемента, я должен написать $('#element').parent().parent().parent()
Есть ли более оптимальный метод для этого?
Когда я хочу получить, например, 3-го уровня родителя элемента, я должен написать $('#element').parent().parent().parent()
Есть ли более оптимальный метод для этого?
Ответы:
Так как parent () возвращает элементы-предки, упорядоченные от ближайших к внешним, вы можете связать их в eq () :
$('#element').parents().eq(0); // "Father".
$('#element').parents().eq(2); // "Great-grandfather".
$('.element').first().parents().eq(num);
[2]
вернет базовый элемент DOM, использование eq(2)
вернет объект jQuery.
Зависит от ваших потребностей, если вы знаете, какого родителя вы ищете, вы можете использовать селектор .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 .
Не нашел никакого ответа с помощью, 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
var p = 1 + n; while (p--) { $p = $p.parent(); }
и если вы хотите изменить на 1, Javascript - это «falsey», который вы можете использовать: while (n--) { $p = $p.parent();}
сохранение условной проверки
nthParent(-2)
? Ваш пример сломан.
(function($) { $.fn.nthParent = function(n) { return $(this).parents().eq(n); }; }(jQuery));
parents
который будет неправильным для выборов с более чем одним элементом.
var p = n >? (1 + n):1;
вместо этого вернет первого родителя в этом случае, а не «ничего» - или где это прерывает цикл в моем примере. ТАК, наверное, так и должно быть: (function($) { $.fn.nthParent = function(n) { var $p = $(this); if (!(n > -0)) { return $() }; var p = 1 + n; while (p--) { $p = $p.parent(); } return $p; }; }(jQuery));
если вы не хотите ничего возвращать.
Если у вас есть общий родительский 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"));
использование eq похоже для захвата динамического DOM, а использование .parent (). parent () - для захвата DOM, который был изначально загружен (если это вообще возможно).
Я использую их оба для элемента, к которому применены классы для onmouseover. eq показывает классы, а .parent (). parent () - нет.
Как родители () возвращает список, это также работает
$('#element').parents()[3];