1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
|
<!DOCTYPE html>
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
<div class="entry-content">
<div class="entry-title roundTop">
<h1 class="jq-clearfix">.closest()</h1>
<div class="entry-meta jq-clearfix">
Categories:
<span class="category"><a href="http://api.jquery.com/category/traversing/" title="View all posts in Traversing">Traversing</a> > <a href="http://api.jquery.com/category/traversing/tree-traversal/" title="View all posts in Tree Traversal">Tree Traversal</a></span>
</div>
</div>
<div class="toc">
<h4><span>Contents:</span></h4>
<ul class="toc-list">
<li>
<a href="#closest1">closest( selector ) </a><ul>
<li>.closest( selector )
</li>
<li>.closest( selector [, context] )
</li>
<li>.closest( jQuery object )
</li>
<li>.closest( element )
</li>
</ul>
</li>
<li>
<a href="#closest2">closest( selectors [ , context ] ) </a><ul><li>.closest( selectors [, context] )
</li></ul>
</li>
</ul>
</div>
<div id="closest1" class="entry method">
<h2 class="jq-clearfix roundTop section-title">
<span class="name">.closest( selector )</span> <span class="returns">Returns: <a class="return" href="http://api.jquery.com/Types/#jQuery">jQuery</a></span>
</h2>
<div class="jq-box roundBottom entry-details">
<p class="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>
<ul class="signatures">
<li class="signature" id="closest-selector">
<h4 class="name">
<span class="versionAdded">version added: <a href="/category/version/1.3/">1.3</a></span>.closest( selector )</h4>
<p class="arguement"><strong>selector</strong>A string containing a selector expression to match elements against.</p>
</li>
<li class="signature" id="closest-selector-context">
<h4 class="name">
<span class="versionAdded">version added: <a href="/category/version/1.4/">1.4</a></span>.closest( selector [, context] )</h4>
<p class="arguement"><strong>selector</strong>A string containing a selector expression to match elements against.</p>
<p class="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>
<li class="signature" id="closest-jQuery object">
<h4 class="name">
<span class="versionAdded">version added: <a href="/category/version/1.6/">1.6</a></span>.closest( jQuery object )</h4>
<p class="arguement"><strong>jQuery object</strong>A jQuery object to match elements against.</p>
</li>
<li class="signature" id="closest-element">
<h4 class="name">
<span class="versionAdded">version added: <a href="/category/version/1.6/">1.6</a></span>.closest( element )</h4>
<p class="arguement"><strong>element</strong>An element to match elements against.</p>
</li>
</ul>
<div class="longdesc">
<p>Given a jQuery object that represents a set of DOM elements, the <code>.closest()</code> method searches through these elements and their ancestors in the DOM tree and constructs 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 <em>with the element itself</em> 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>
<pre>var listItemII = document.getElementById('ii');
$('li.item-a').closest('ul', listItemII)
.css('background-color', 'red');
$('li.item-a').closest('#one', listItemII)
.css('background-color', 'green');</pre>
<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>
</div>
<h3>Examples:</h3>
<div class="entry-examples" id="entry-examples">
<div id="example-0">
<h4>Example: <span class="desc">Show how event delegation can be done with closest. The closest list element toggles a yellow background when it or its descendent is clicked.</span>
</h4>
<pre class="prettyprint"><code class="example demo-code"><!DOCTYPE html>
<html>
<head>
<style>
li { margin: 3px; padding: 3px; background: #EEEEEE; }
li.hilight { background: yellow; }
</style>
<script src="http://code.jquery.com/jquery-1.7rc2.js"></script>
</head>
<body>
<ul>
<li><b>Click me!</b></li>
<li>You can also <b>Click me!</b></li>
</ul>
<script>
$( document ).bind("click", function( e ) {
$( e.target ).closest("li").toggleClass("hilight");
});
</script>
</body>
</html></code></pre>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div>
<div id="example-1">
<h4>Example: <span class="desc">Pass a jQuery object to closest. The closest list element toggles a yellow background when it or its descendent is clicked.</span>
</h4>
<pre class="prettyprint"><code class="example demo-code"><!DOCTYPE html>
<html>
<head>
<style>
li { margin: 3px; padding: 3px; background: #EEEEEE; }
li.hilight { background: yellow; }
</style>
<script src="http://code.jquery.com/jquery-1.7rc2.js"></script>
</head>
<body>
<ul>
<li><b>Click me!</b></li>
<li>You can also <b>Click me!</b></li>
</ul>
<script>
var $listElements = $("li").css("color", "blue");
$( document ).bind("click", function( e ) {
$( e.target ).closest( $listElements ).toggleClass("hilight");
});
</script>
</body>
</html></code></pre>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div>
</div>
</div>
</div>
<div id="closest2" class="entry method">
<h2 class="jq-clearfix roundTop section-title">
<span class="name">.closest( selectors [, context] )</span> <span class="returns">Returns: <a class="return" href="http://api.jquery.com/Types/#Array">Array</a></span>
</h2>
<div class="jq-box roundBottom entry-details">
<p class="desc"><strong>Description: </strong>Gets an array of all the elements and selectors matched against the current element up through the DOM tree.</p>
<ul class="signatures"><li class="signature" id="closest-selectors-context">
<h4 class="name">
<span class="versionAdded">version added: <a href="/category/version/1.4/">1.4</a></span>.closest( selectors [, context] )</h4>
<p class="arguement"><strong>selectors</strong>An array or string containing a selector expression to match elements against (can also be a jQuery object).</p>
<p class="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>
<div class="longdesc"><p>This method is primarily meant to be used internally or by plugin authors.</p></div>
<h3>Example:</h3>
<div class="entry-examples" id="entry-examples-1"><div id="example-1-0">
<h4><span class="desc">Show how event delegation can be done with closest.</span></h4>
<pre class="prettyprint"><code class="example demo-code"><!DOCTYPE html>
<html>
<head>
<style></style>
<script src="http://code.jquery.com/jquery-1.7rc2.js"></script>
</head>
<body>
<ul><li></li><li></li></ul>
<script>
var close = $("li:first").closest(["ul", "body"]);
$.each(close, function(i){
$("li").eq(i).html( this.selector + ": " + this.elem.nodeName );
});</script>
</body>
</html></code></pre>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div></div>
</div>
</div>
</div>
</body></html>
|
