找到选择器的第一个父级

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)

Answer 2

First Solution:

$(this).closest('.A')

Source: http://api.jquery.com/closest/ This will return the first parent when traversing that matchs the selector.

Second solution:

$(this).parents('.A:first')

Source: http://api.jquery.com/parents/ This will return all the parents that matches the selectors

Answer 3

关于什么

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

Answer 4

这就是我这样做的方式

$(this).parents("div.A")

Answer 5

The jQuery parent selector might help you there. You can combine it with the class you are looking for. See the docs @ http://api.jquery.com/parent-selector/