Most elegant way to achive the some element?

Question

I wrote function onclick of a element

   <div class="left_collapsed">Որոնում</div>
        <div class="container" style="display: none;">
           <ul> 
              <li>
                 <a href="" id="search_refresh" >Թարմացնել համակարգը</a>
              </li>
           </ul>
        </div>
   </div>

$("#search_refresh").click(function(u)
{
     how can i achieve to first div element here?
     (i have many div's with left_collapsed class )

});

i wrote $(this).parent("li").parent("ul").parent("div").before("div").addClass("left_expended");

but i dislike it:)

Thanks much

Answer 1

Try jQuery.parents, something like this:

$("#search_refresh").click(function()
{
     var element = $(this).parents(".left_collapsed");
});

Update: jAndy's answer is better, you should use closest instead, particularly if the left_collapsed divs are nested such that #search_refresh is inside multiple left_collapsed divs.

Answer 2

$(this).parents('.left_collapsed');

Answer 3

You can either use .closest()

$(this).closest('.left_collapsed');

or .parents()

$(this).parents('.left_collapsed');

Actually, .closest() is a better choice, since it'll only grab parent nodes until it reaches the desired one, whereass .parents() grabs all parent nodes (up to the document root).

Ref.: .parents(), .closest()