jQuery: How can I find the ID attribute of a parent element with a particular class name from a child element?

$('<element>').parent('.<classname>').attr('id');

You have to walk the DOM to the closest <div/> with the class "fruit" and get the value of the attribute "id". Therefore assuming your child has the class "peel": $('.peel').closest('.fruit').attr('id')

In your code 'this' is the window. Move your script below the rest of your html (but before the </body> and   $("#test").closest(".fruit").prop("id") Will give you what you want.

in your code jQuery(this) do not represent the $("#test"),it's object jQuery(Window);when you add debug statement before var id,you will see: console.debug(jQuery(this)); Object { 0: Window → test.html, length: 1 } //output when you change your code to $("#test").click(function (){ var id = jQuery( this ).closest( ".fruit" ).attr( "id" ); jQuery( 'p#test' ).append( id ); }); or var id = $("#test").closest( ".fruit" ).attr( "id" ); the object DOM will be $("#test") you will get correct result.

There can only be one direct parent, so anything further up the chain, is referred to as an ancestor. To find ancestors, using jQuery, you traverse the DOM using the jQuery method .closest().Example:$('.childElementName').closest('.ancestorName').attr('idName')

From your current example, I believe you want to get id “apple” from “#test” element.You can select its parent with 3 main ways. Here I am sharing the snippet. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <div id="banana" class="fruit"> <div> <p>some text</p> </div> </div> <div id="apple" class="fruit"> <div> <p id="test">some text</p> </div> </div> <div id="cherry" class="fruit"> <div> <p>some text</p> </div> </div> <script> $(function(){ console.log($('#test').parent().parent().attr('id')); console.log($('#test').parents('.fruit').attr('id')); console.log($('#test').closest('.fruit').attr('id')); }); </script> Here’s an analyzation: parent() walks just one level up in the DOM tree. parents(".foo") walks up to the root and selects only those elements that match the given selector .foo. closest(".foo") walks up to the root but stops once an element matches the selector .foo. So I would choose the last one, closest(".foo"). The reason: It’s better than chaining parent, because if your document changes because you removed or added one hierarchy, you don’t need to change the jQuery code. It’s better than parents(".foo"), because it stops as soon as a match has been found.