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
|
<!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">.find()</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 id="find1" class="entry method">
<h2 class="jq-clearfix roundTop section-title">
<span class="name">.find( 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 descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.</p>
<ul class="signatures">
<li class="signature" id="find-selector">
<h4 class="name">
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.find( selector )</h4>
<p class="arguement"><strong>selector</strong>A string containing a selector expression to match elements against.</p>
</li>
<li class="signature" id="find-jQuery object">
<h4 class="name">
<span class="versionAdded">version added: <a href="/category/version/1.6/">1.6</a></span>.find( jQuery object )</h4>
<p class="arguement"><strong>jQuery object</strong>A jQuery object to match elements against.</p>
</li>
<li class="signature" id="find-element">
<h4 class="name">
<span class="versionAdded">version added: <a href="/category/version/1.6/">1.6</a></span>.find( 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>.find()</code> method allows us to search through the descendants of these elements in the DOM tree and construct a new jQuery object from the matching elements. The <code>.find()</code> and <code>.children()</code> methods are similar, except that the latter only travels a single level down the DOM tree.</p>
<p>The first signature for the <code>.find()</code>method accepts a selector expression of the same type that we can pass to the <code>$()</code> function. The elements will be filtered by testing whether they match this selector.</p>
<p>Consider a page with a basic nested list on it:</p>
<pre>
<ul class="level-1">
<li class="item-i">I</li>
<li 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>If we begin at item II, we can find list items within it:</p>
<pre>$('li.item-ii').find('li').css('background-color', 'red');</pre>
<p>The result of this call is a red background on items A, B, 1, 2, 3, and C. Even though item II matches the selector expression, it is not included in the results; only descendants are considered candidates for the match.</p>
<blockquote><p>Unlike in the rest of the tree traversal methods, the selector expression is required in a call to <code>.find()</code>. If we need to retrieve all of the descendant elements, we can pass in the universal selector <code>'*'</code> to accomplish this.</p></blockquote>
<p><a href="http://api.jquery.com/jquery/#selector-context">Selector context</a> is implemented with the <code>.find()</code> <code>method;</code> therefore, <code>$('li.item-ii').find('li')</code> is equivalent to <code>$('li', 'li.item-ii')</code>.</p>
<p><strong>As of jQuery 1.6</strong>, we can also filter the selection with a given jQuery collection or element. With the same nested list as above, if we start with:</p>
<pre>var $allListElements = $('li');</pre>
<p>And then pass this jQuery object to find:</p>
<pre>$('li.item-ii').find( $allListElements );</pre>
<p>This will return a jQuery collection which contains only the list elements that are descendants of item II.</p>
<p>Similarly, an element may also be passed to find:</p>
<pre>
var item1 = $('li.item-1')[0];
$('li.item-ii').find( item1 ).css('background-color', 'red');
</pre>
<p>The result of this call would be a red background on item 1.</p>
</div>
<h3>Examples:</h3>
<div class="entry-examples" id="entry-examples">
<div id="example-0">
<h4>Example: <span class="desc">Starts with all paragraphs and searches for descendant span elements, same as $("p span")</span>
</h4>
<pre class="prettyprint"><code class="example demo-code"><!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7rc2.js"></script>
</head>
<body>
<p><span>Hello</span>, how are you?</p>
<p>Me? I'm <span>good</span>.</p>
<script>
$("p").find("span").css('color','red');
</script>
</body>
</html></code></pre>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div>
<div id="example-1">
<h4>Example: <span class="desc">A selection using a jQuery collection of all span tags. Only spans within p tags are changed to red while others are left blue.</span>
</h4>
<pre class="prettyprint"><code class="example demo-code"><!DOCTYPE html>
<html>
<head>
<style>
span { color: blue; }
</style>
<script src="http://code.jquery.com/jquery-1.7rc2.js"></script>
</head>
<body>
<p><span>Hello</span>, how are you?</p>
<p>Me? I'm <span>good</span>.</p>
<div>Did you <span>eat</span> yet?</div>
<script>
var $spans = $('span');
$("p").find( $spans ).css('color','red');
</script>
</body>
</html></code></pre>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div>
<div id="example-2">
<h4>Example: <span class="desc">Add spans around each word then add a hover and italicize words with the letter t.</span>
</h4>
<pre class="prettyprint"><code class="example demo-code"><!DOCTYPE html>
<html>
<head>
<style>
p { font-size:20px; width:200px; cursor:default;
color:blue; font-weight:bold; margin:0 10px; }
.hilite { background:yellow; }
</style>
<script src="http://code.jquery.com/jquery-1.7rc2.js"></script>
</head>
<body>
<p>
When the day is short
find that which matters to you
or stop believing
</p>
<script>
var newText = $("p").text().split(" ").join("</span> <span>");
newText = "<span>" + newText + "</span>";
$("p").html( newText )
.find('span')
.hover(function() {
$(this).addClass("hilite");
},
function() { $(this).removeClass("hilite");
})
.end()
.find(":contains('t')")
.css({"font-style":"italic", "font-weight":"bolder"});
</script>
</body>
</html></code></pre>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div>
</div>
</div>
</div>
</div>
</body></html>
|
