How to find first parent element in jquery

Question

Conside below html -

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

if I want to get <div class="element"> element and I have reference to the container1. In jquery what I do is,

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

instead of -

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

This is process to find any child element when I have reference to any of the parent element. But instead when I have reference to a child element and want to get parent element then every time I have to go one level up -

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

and I can't do like this -

$(".element").findParent()

I have not come across any method like findParent() in jquery. Is there which I am not aware of? Or is it not there for some reason?

Answer 1

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

will give all parents of .element(including html and body)

DEMO

To find any specific parent, suppose container1 then

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

DEMO

jQuery .parents() generally find all parents, but if you passed a selector then it will search for that.

Answer 2

just use

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

if no ancestor with that id is found then

$(".element").closest('#container1').length will be 0