CODEWITHSUNDEEP
jqueryjquery-selectors
willdanceforfun
willdanceforfun

Reputation: 11240

I don't understand 'closest()' still... Please clarify

I am struggling with jQuery's closest() selector.

I've made a jsfiddle of what I think should work... but it clearly doesn't. Why not?

the HTML

<div class="button">button</div>
<div class="return_window"></div>

and the incredibly complex JS

$('.button').click(function(){

    $(this).closest('.return_window').html('hi');

});

What don't I understand about this illusive .closest() selector?? Those div's look pretty close to me. I've read the documentation but I don't know what it is.. Resig's documentation or whoever writes it seems to be on a different dimension to me.

Any pointers greatly appreciated.

Upvotes: 3

Views: 183

Answers (7)

user359135
user359135

Reputation:

closest looks up the DOM, if the start point is not inside the one you are looking for it wont find it.

I modded your code to show this:

http://jsfiddle.net/uRgEw/2/

maybe you are looking for this:

$('.button').click(function(){

alert('hi');

$(this).closest('.container').find('.return_window').html('hi');

});

with HTML of:

<div class="container">
    <div class="return_window">

    </div>
    <div class="button">button</div>
</div>

this will let you go up and back down with a good degree of flexibility.

as done here:

http://jsfiddle.net/uRgEw/5/

Upvotes: 1

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76880

In your case use next() not closest() as closest() looks up the tree BEGINNING with the current element:

$('.button').click(function(){

    $(this).next('.return_window').html('hi');

});

Upvotes: 1

J. Holmes
J. Holmes

Reputation: 18546

.closest() finds the closest ancestor that matches your selector. closest() starts with itself, then its parent, or its parents' parent, or so on.

what you have there are siblings. you should use .siblings() if you want to find elements that share the same parent, or are next to each other.

Upvotes: 1

Ariel
Ariel

Reputation: 26753

Closest searches PARENTS of the element - not siblings near the elements.

It's called closest because it finds the closest parent of a particular type (selector) to the element. The .parents() get all the parents.

I use it all the time.

Like:

<form>
  <div>
    <p>
      <input type="button" onClick="alert($(this).closest('form'));">
    </p>
  </div>
</form>

From deep inside I can quickly find the parent form, ignoring all the intervening elements.

If you want the nearest sibling do:

$(this).prevAll('.return_window').last();
$(this).nextAll('.return_window').first();

This will give you the two closest siblings above and below, and it's on you to figure out which is closer.

Upvotes: 1

otakustay
otakustay

Reputation: 12395

closest walks from the current selected element to the root, using parentNode, and find the first element which matches the given selector:

function closest(element, selector) {
    while (element != null) {
        if (matchesSelector(element, selector)) {
            return true;
        }
        element = element.parentNode;
    }
    return null;
}

For example, we have HTML like:

<div id="d1" class="a">
  <div id="d2" class="b">
    <div id="d3" class="a">
      <span id="target"></span>
    </div>
  </div>
</div>

and we need some closest selector, the output would be:

  • closest(target, '.a') -> #d3
  • closest(target, 'div') -> #d3
  • closest(target, '.b') -> #d2

Upvotes: 1

Colin
Colin

Reputation: 784

<div class="return_window">
    <div class="button">button</div>
</div>

In your example the above would be the HTML that would work. It finds the closest ancestor.

You could use something like:

$(this).next('.return_window').html('hi')

With the HTML you've provided.

Upvotes: 1

James Allardice
James Allardice

Reputation: 165971

closest is used to climb up the DOM tree, rather than look sideways at sibling elements. In simple terms, it will look at the parent element, and the parent of that, and so on, until it reaches what it's looking for (or the top of the DOM tree).

For example:

<div class="grandparent">
    <div class="parent">
        <div id="child"></div>
        <div class="grandparent"></div>
    </div>
</div>

The following jQuery will select the outer div, rather than the sibling div:

$(".child").closest(".grandparent");

closest is the opposite of find, which looks down the DOM tree. To select siblings, you can use the siblings method.

Upvotes: 4

Related Questions