nearest ancestor node in jQuery

Question

In my javascript experience, I found that is a very common task "searching the nearest ancestor of an element with some condition (tag name, class,...)". Can the parents() method of jquery do the job? The order of returned elements of parents() is predictable? Is top-to-bottom or bottom-to-top? For the moment I use this utility function:

function ancestor(elem, selector) {
  var $elem = $( elem ).parent();
  while( $elem.size() > 0 ) {
    if( $elem.is( selector ) ) 
    return $elem;
    else
       $elem = $elem.parent();
  }
  return null;
}

Can someone tell me if there is a clever way to do the job?

Answer 1

Edit: Since jQuery 1.3, this has been built in as the closest() function. eg: $('#foo').closest('.bar');

---

yep - parents() traverses up the tree.

<div id="a">
    <div id="b">
        <p id="c">
            <a id="d"></a>
        </p>
    </div>
</div>

$('#d').parents("div:first"); will select div b.

Answer 2

Adding to @nickf's answer:

jQuery 1.3 simplifyed this task with closest.

Given a DOM:

<div id="a">
    <div id="b">
        <p id="c">
            <a id="d"></a>
        </p>
    </div>
</div>

You can do:

$('#d').closest("div"); // returns [ div#b ]

[Closest returns a] set of elements containing the closest parent element that matches the specified selector, the starting element included.