jQuery get id of element by searching for it by class

jquery dom jquery-traversing
DMin picture DMin · Apr 30, 2011 · Viewed 50.8k times · Source

This is my html :

<div id="my_box_one" class="head-div">
   <div>
       <div class="some_box">a</div>
       <div class="some_box">b</div>
    </div>
</div>

I want to get the ID of the parent div("#my_box_one") using the class of that div(".head-div") 

$(document).ready(function(){

$(".some_box").click(function(){
   var abc = $(this).parentsUntil(".head-div").attr("id");
   // also tried $(this).parent(".head-div") -- same effect
   alert(abc); // Shows as Undefined
});   

});

I can do the following and it will work okay, but it doesn't seem right.

var abc = $(this).parent("div").parent("div").attr("id");

Answer

Lapple picture Lapple · Apr 30, 2011

You can use .closest( selector ), for example:

var abc = $(this).closest(".head-div").attr("id");

http://api.jquery.com/closest/

.parent( selector ) selects only immediate parent of the element.

Related questions

How to wrap DIV tags with different class names?

Duplicate: How can I add a parent element to a group of paragraph? I have the following HTML blocks repeated in the document <!-- first block --> <div class="first"> My first div </div> &…

Read More
How do I check if an element is hidden in jQuery?

Is it possible to toggle the visibility of an element, using the functions .hide(), .show() or .toggle()? How would you test if an element is visible or hidden?

Read More
How can I select an element by name with jQuery?

Have a table column I'm trying to expand and hide: jQuery seems to hide the td elements when I select it by class but not by element's name. For example, why does: $(".bold").hide(); // selecting by class works $("tcol1").hide(); // …

Read More