Skip to content
jQuery find – 5 examples to search parent, child elements by find method
In This Tutorial
What is jQuery find?
The find method is used to “search” the specified element/selector to return downward descendant elements. Where a descendant can be the first level child, second level, third level and so on.
Alternatively, you can say jQuery find method returns the child, grandchild, the great-grandchild and so on elements of the specified parent element.
The find method Video Tutorial
For example, you have a <div> element structure as follows:
<div>
<p>some text
<span>some text</span>
</p>
</div>
In that case, the <p> is a child of div element while <span> is the grandchild or second level child of the div element.
An example of applying CSS with find method
You can use the find jQuery method to search/traverse through, by specifying div and perform some desired action(s) like changing the presentation of child element; adding some CSS, changing color, making button disabled/enabled, show/hide text boxes without reloading the web page etc.
In this guide, we will show you how to use the find method of jQuery along with online examples, but first, let us look at the general syntax of find method.
How to use the find method?
The general syntax of find method is:
$(“parent”).find(“child”);
Where the parent element can be a selector, an element etc.
In the following section, we will show you examples of using find method. We will use the find method to change first or other level child element presentation. Find by id or class and changing attributes etc.
A $.find example to add text to child elements
The example below uses the find method to add text at the end of the paragraph. A div element, which is a parent, has one paragraph (child) and the paragraph has a span child.
As you click on the button, it will add text at the end of the paragraph where we used the after method of jQuery with find method.
Experience this example online
|
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
|
<html>
<head>
<script src=“http://code.jquery.com/jquery-1.10.1.min.js”></script>
</script>
<script>
$(document).ready(function(){
$(“#removeatt”).click(function(){
$(“div”).find(“p”).after(“test “);
});
});
</script>
</head>
<body>
<div id=“divfind”>This is div parent element!
<p>This is child paragraph of Div<br />
<span>This is span, child of paragraph and grand child of div</span>
</p>
</div>
<hr />
<button id=“removeatt”>Run find method</button>
</body>
</html>
|
jQuery find example to add CSS to child elements
The example below adds CSS by using find method of jQuery. As you click on “Run find method” button, the span (grandchild of div) element’s CSS will be added. A solid border line will be added by using the find method.
Note that, the find method can go to any level of the parent, whereas if you need to work at first level only you should use jQuery .children method.
Experience this example online
|
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
|
<html>
<head>
<script src=“http://code.jquery.com/jquery-1.10.1.min.js”></script>
</script>
<script>
$(document).ready(function(){
$(“#removeatt”).click(function(){
$(“div”).find(“span”).css({“border”:“1px solid #C03009”});
});
});
</script>
</head>
<body>
<div id=“divfind”>This is div parent element!
<p>This is child paragraph of Div<br />
<span>This is span, child of paragraph and grand child of div</span>
</p>
</div>
<hr />
<button id=“removeatt”>Run find method</button>
</body>
</html>
|
find by class name example
You can also specify class name in jQuery find method. The example below uses div parent element and find class name “testfind”, which is used in the span element. Then we used jQuery CSS method to add CSS.
As you click on the “Run find method” button, the border will be placed around the span element by using find method.
Experience this example online
|
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
|
<html>
<head>
<script src=“http://code.jquery.com/jquery-1.10.1.min.js”></script>
</script>
<script>
$(document).ready(function(){
$(“#removeatt”).click(function(){
$(“div”).find(“.testfind”).css({“border”:“1px solid #C03009”});
});
});
</script>
<style>
.testfind
{
color: #F1C40E;
font-size:17px;
}
</style>
</head>
<body>
<div id=“divfind”>This is div parent element!
<p>This is child paragraph of Div<br />
<span>This is span, child of paragraph and grand child of div</span>
</p>
</div>
<hr />
<button id=“removeatt”>Run find method</button>
</body>
</html>
|
find by id example
You can also specify the id in find jQuery method. The example below uses div parent element and find by id “testid”, which is used in the span element.
As you click on the “Run find method” button, the border will be placed around the span element by using find along with CSS method of jQuery.
Experience this example online
|
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
|
<html>
<head>
<script src=“http://code.jquery.com/jquery-1.10.1.min.js”></script>
</script>
<script>
$(document).ready(function(){
$(“#removeatt”).click(function(){
$(“div”).find(“#testid”).css({“border”:“1px solid #C03009”});
});
});
</script>
</head>
<body>
<div id=“divfind”>This is div parent element!
<p>This is child paragraph of Div<br />
<span id=“testid”>This is span, child of paragraph and grand child of div</span>
</p>
</div>
<hr />
<button id=“removeatt”>Run find method</button>
</body>
</html>
|
find by name example
You can also specify the name attribute in find method. In the example below, as you click on the button “Run find method”, the color of the text of another button which is the grandchild of div will be changed by using the name attribute.
Experience this example online
|
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
|
<html>
<head>
<script src=“http://code.jquery.com/jquery-1.10.1.min.js”></script>
</script>
<script>
$(document).ready(function(){
$(“#removeatt”).click(function(){
$(“div”).find(“[name=testfind]”).css({“color”:“#C03009”});
});
});
</script>
</head>
<body>
<div id=“divfind”>This is div parent element!
<p>This is child paragraph of Div<br />
<button name=“testfind”>Test Find</button>
</p>
</div>
<hr />
<button id=“removeatt”>Run find method</button>
</body>
</html>
|
Useful reading: jQuery children | jQuery filter
Leave A Comment?