.children( [selector ] ) Returns: jQuery
Description: Get the children of each element in the set of matched elements, optionally filtered by a selector.
-
version added: 1.0.children( [selector ] )
-
selectorType: SelectorA string containing a selector expression to match elements against.
-
Given a jQuery object that represents a set of DOM elements, the .children()
method allows us to search throughthe children of these elements in the DOM tree and construct a new jQuery object from the matching elements. The .children()
method differs from .find()
in that .children()
only travels a single level down the DOM tree while .find()
can traverse down multiple levels to select descendant elements (grandchildren, etc.) as well. Note also that like most jQuery methods, .children()
does not return text nodes; to get all children including text and comment nodes, use .contents()
.
The .children()
method optionally accepts a selector expression of the same type that we can pass to the $()
function. If the selector is supplied, the elements will be filtered by testing whether they match it.
Consider a page with a basic nested list on it:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
|
If we begin at the level-2 list, we can find its children:
1
|
|
The result of this call is a red background behind items A, B, and C. Since we do not supply a selector expression, all of the children are part of the returned jQuery object. If we had supplied one, only the matching items among these three would be included.
Examples:
Example: Find all children of the clicked element.
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
|
|
Example: Find all children of each div.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
|
Example: Find all children with a class "selected" of each div.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
|