javascript/jquery select all child elements inside a parent element

Question

I have a bunch of child elements that are uniquely identified within a parent div. I want to know if there's a way in jQuery (or javascript) to capture all of them? The number of children in the parent div is arbitrary, meaning it could be any number for each div. For example:

<div class="parent1">
   <span class="child1">some text here</span>
   <span class="child2">some other text</span>
   ...
   <span class="child49">yet more text</span>
   <span class="something_else">other text i don't want to select</span>
</div>
<div class="parent2">
   <span class="child1">some text</span>
   <span class="child2">some text</span>
   ...
   <span class="child120">some text</span>
</div>

So considering the above example, how do I get ALL the children (.child1 through .child49) within the class parent1?

I know that doing the following will work in jQuery (using multiple selector):

$(".child1, .child2, ..., .child49").css("background","red");

But is there a better way? I won't always know how many children are in each parent.

EDIT: also, I might have other children in the parent with a different class name that I DO NOT want to select; I specifically want to select all the "child*" classes.

andyb · Accepted Answer · 2011-08-06T08:33:03.093

7

$('.parent1 span[class^="child"]')

will select all the spans that start with the class child under the class .parent1.

If you want all the span.childX under all parentX then use:

$('div[class^="parent"] span[class^="child"]')

This is using a CSS3 attribute selector which jQuery have implemented (and extended in some cases). From the documentation:

E[foo^="bar"] an E element whose "foo" attribute value begins exactly with the string "bar"

edited Aug 06 '11 at 08:33

answered Aug 06 '11 at 08:24

andyb

43,435
12
121
150

This only selects the SPANs, is there a way to select ALL child elements? – Greg L May 29 '14 at 00:33
@GregL Yes this answers the question that was asked where _child_ referred to the class rather than the element relationship. Your question is different and should be asked separately. That said, if you just want _all_ children under a specific element you can use the CSS Universal selector [`*`](http://www.w3.org/TR/css3-selectors/#universal-selector) and child combinator [`>`](http://www.w3.org/TR/css3-selectors/#child-combinators) for example `$('div > *')` would select all direct children of a `
`
– andyb May 29 '14 at 07:41

score 2 · Answer 2 · answered Aug 06 '11 at 08:17

2

These codes gets all child in div.parent1 and div.parent2

$('[class^="parent"] span').css({ });
$('[class^="parent"]').children().css({ });

Thess codes gets onli the children for parent 1

$('.parent1 span').css...
$('.parent1').children().css...

answered Aug 06 '11 at 08:17

Jose Adrian

1,217
1
17
32

Thanks, what if I have other spans inside the parent div that i do not want to select; such as a span that is not labeled as "child" but has a different class like "something_else", i don't want it to select that span. – James Nine Aug 06 '11 at 08:21
I don't know if I understand you but try this: $('.parent1 span:not(.something_else)')... i think. – Jose Adrian Aug 06 '11 at 08:28

Rafay · Answer 3 · 2011-08-06T08:27:38.253

1

use .children along with .filter, if number of children are not certain then label all childs which you want to manipulate of parent1 as child1

 $(".parent1").children().filter(".child1").css({color:'Red'});

here is the fiddle http://jsfiddle.net/8hUqV/1/

jquery children

edited Aug 06 '11 at 08:27

answered Aug 06 '11 at 08:21

Rafay

30,950
5
68
101

javascript/jquery select all child elements inside a parent element

3 Answers3