Как найти первый родительский элемент в jquery

Консайд ниже html -

<div class="container1">
   <div class="container2">
      <div class="container3">
         <div class="container4">
             <div class="element">
             ...
         </div>
      </div>
   </div>
</div>

если я хочу получить элемент <div class="element">, и у меня есть ссылка на container1. В jquery то, что я делаю,

$(".container1").find(".element")

вместо

$(".container1").children().children().children().find(".element")

Это процесс поиска любого дочернего элемента, когда у меня есть ссылка на любой из родительского элемента. Но вместо этого, когда у меня есть ссылка на дочерний элемент и вы хотите получить родительский элемент, то каждый раз, когда я должен идти на один уровень вверх -

$(".element").parent().parent().parent().parent()

и я не могу этого сделать -

$(".element").findParent()

Я не встречал какой-либо метод, например findParent() в jquery. Я не знаю об этом? Или это почему-то не так?

Ответ 1

$(".element").parents();

предоставит всем родителям .element (включая html и body)

DEMO

Чтобы найти какой-либо конкретный родитель, предположим container1, тогда

$('.element').parents('.container1')

DEMO

jQuery .parents() обычно найти всех родителей, но если вы передадите селектор, он будет искать это.

Ответ 2

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

$(".element").closest('#container1');

если не найдено ни одного предка с этим id, тогда

$(".element").closest('#container1').length будет 0

Ответ 3

Чтобы получить первого родителя лично, я использую следующую конструкцию:

var count_parents = $(".element").parents().length;
$(".element").parents().eq(count_parents - 1);

Надеюсь, это будет полезно для кого-то.