Question

Consider this sample html

<div class="A">
    <div class="B">
        <span class="C">Sample text</span>
        <div class="D">
            <div class="E">Clickable Text</div>
        </div>
    </div>
</div>

And some jQuery

$(".E").click(function(){
    //body
});

What is the easiest way to get a parent of $(this) that matches a selector? For example, say in the example I need to get the div where class="A". At the moment because I know the structure of the html I could do

$(this).parent().parent();

But I’m looking for a way that would work regardless of the structure. Something along the lines of

$(this).findFirstParent(".A");

I hope I’ve been understandable.

Answer 1

$(".E").click(function(){
    console.log($(this).closest('.A'));
    /* console.log($(this).parents('.A')); works fine too */
});

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

Note that parent() is different than parents() method (the first one look for one ancestor only)