<pclass="desc"><strong>Description: </strong>Get the first element that matches the selector, beginning at the current element and progressing up through the DOM tree.</p>
<pclass="arguement"><strong>selector</strong>A string containing a selector expression to match elements against.</p>
<pclass="arguement"><strong>context</strong>A DOM element within which a matching element may be found. If no context is passed in then the context of the jQuery set will be used instead.</p>
</li>
</ul>
<divclass="longdesc">
<p>Given a jQuery object that represents a set of DOM elements, the <code>.closest()</code> method allows us to search through these elements and their ancestors in the DOM tree and construct a new jQuery object from the matching elements. The <code>.parents()</code> and <code>.closest()</code> methods are similar in that they both traverse up the DOM tree. The differences between the two, though subtle, are significant:</p>
<table>
<thead><tr>
<th>.closest()</th>
<th>.parents()</th>
</tr></thead>
<tbody>
<tr>
<td>Begins with the current element</td>
<td>Begins with the parent element</td>
</tr>
<tr>
<td>Travels up the DOM tree until it finds a match for the supplied selector</td>
<td>Travels up the DOM tree to the document's root element, adding each ancestor element to a temporary collection; it then filters that collection based on a selector if one is supplied </td>
</tr>
<tr>
<td>The returned jQuery object contains zero or one element</td>
<td>The returned jQuery object contains zero, one, or multiple elements</td>
</tr>
</tbody>
</table>
<pre>
<ul id="one" class="level-1">
<li class="item-i">I</li>
<li id="ii" class="item-ii">II
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>
</pre>
<p>Suppose we perform a search for <code><ul></code> elements starting at item A:</p>
<pre>
$('li.item-a').closest('ul')
.css('background-color', 'red');
</pre>
<p>This will change the color of the level-2 <code><ul></code>, since it is the first encountered when traveling up the DOM tree.</p>
<p>Suppose we search for an <code><li></code> element instead:</p>
<pre>$('li.item-a').closest('li')
.css('background-color', 'red');
</pre>
<p>This will change the color of list item A. The <code>.closest()</code> method begins its search with the element itself before progressing up the DOM tree, and stops when item A matches the selector.</p>
<p>We can pass in a DOM element as the context within which to search for the closest element.</p>
<p>This will change the color of the level-2 <code><ul></code>, because it is both the first <code><ul></code> ancestor of list item A and a descendant of list item II. It will not change the color of the level-1 <code><ul></code>, however, because it is not a descendant of list item II.</p>
<pclass="desc"><strong>Description: </strong>Gets an array of all the elements and selectors matched against the current element up through the DOM tree.</p>
<pclass="arguement"><strong>selectors</strong>An array of string containing a selector expression to match elements against (can also be a jQuery object).</p>
<pclass="arguement"><strong>context</strong>A DOM element within which a matching element may be found. If no context is passed in then the context of the jQuery set will be used instead.</p>
</li></ul>
<divclass="longdesc"><p>This method is primarily meant to be used internally or by plugin authors.</p></div>
