parent vs closest

Question

Why does this work:

$('.button_30').click(function(){
    $(this).closest('.portlet').find('.portlet_content').text("foo");
});

any why does this not work:

$('.button_30').click(function(){
    $(this).parent('.portlet').find('.portlet_content').text("foo");
});

where the html looks something like this:

<div class="portlet portlet_30">

    <div class="portlet_header portlet_header_30">
        header content here
    </div>

    <div class="portlet_sub_header portlet_sub_header_30">
        <input type="text" class="textbox_30" />
    </div>

    <div class="portlet_content portlet_content_30">
        results go here
    </div>

    <div class="portlet_footer portlet_footer_30">
        <input type="button" class="button_30" />
    </div>

</div>

<div class="portlet portlet_30">

    <div class="portlet_header portlet_header_30">
        header content here
    </div>

    <div class="portlet_sub_header portlet_sub_header_30">
        <input type="text" class="textbox_30 />
    </div>

    <div class="portlet_content portlet_content_30">
        results go here
    </div>

    <div class="portlet_footer portlet_footer_30">
        <input type="button" class="button_30" />
    </div>

</div>

Because `.portlet` is not the parent of `.button_30`, `.portlet_footer` is the parent. — Felix Kling, May 08 '12 at 13:23
It is compared with parents here: https://api.jquery.com/closest/ — Christophe Roussy, Nov 15 '17 at 12:47

score 38 · Accepted Answer · answered May 08 '12 at 13:21

Because parent() will return the parent (immediate ancestor) only if it matches the selector specified.

However, closest() will search all ancestors and return the first one that matches the selector.

As the parent of button_30 is a div, whose parent is the div with the class of portlet, the parent() function is not matching it and returning an empty set, where-as closest() is matching it.

To complete the set of similar methods here you have parents(), which is like closest() but doesnt stop at the first matched element; it returns all ancestors which match the selector.

score 36 · Answer 2 · edited Feb 12 '15 at 11:08

36

.parent() only looks at the immediate ancestor.
.closest() looks at all ancestors, as well as the originating element, and returns the first match.
.parents() looks at all ancestors, and returns all matches.

edited Feb 12 '15 at 11:08

Alexander Bondar

524
4
21

answered May 08 '12 at 13:21

cliffs of insanity

3,683
1
16
18

2

Interesting performance comparison between closest and parents here: http://jsperf.com/jquery-parents-vs-closest/45 – Zé Carlos Feb 20 '14 at 14:55

score 1 · Answer 3 · answered May 08 '12 at 13:21

1

parent() only looks one level up, you can try parents() to search all way up

$('.button_30').click(function(){
    $(this).parents('.portlet').find('.portlet_content').text("foo");
});

you can see the documentation

answered May 08 '12 at 13:21

jorgehmv

3,633
3
25
39

score 1 · Answer 4 · answered May 08 '12 at 13:22

1

The closest^{[API Ref]} method traverses up the ancestor tree as far as it needs to go to find a selector match.

The parent^{[API Ref]} method only looks at the direct parent.

answered May 08 '12 at 13:22

FishBasketGordo

22,904
4
58
91

score 1 · Answer 5 · answered May 08 '12 at 13:22

The parent method checks only one level up the chain of elements, while closest will keep checking the list of parents up until a match is found (or html tag has been reached). The equivalent is:

$('.button_30').click(function(){
    $(this).parents('.portlet:eq(0)').find('.portlet_content').text("foo");
});

score 0 · Answer 6 · answered May 08 '12 at 13:22

0

Because the only elements which match .portlet are grandparents, not parents of the elements on which the event is bound

answered May 08 '12 at 13:22

Quentin

914,110
126
1,211
1,335

score 0 · Answer 7 · answered May 08 '12 at 13:23

Because in the second selector you're looking for the Parent and this function move's into the DOM to the node father but only one level which contains the class portlet_footer portlet_footer_30 not the classes that you're passing to the selector .portlet to work with parent you should move two levels in other words.

each time that you're using parent you move one node up

parent vs closest

7 Answers7

Linked