How to select an element and its children in jquery?

Question

I have a div with further divs contained in it.These divs internally contain table/div in them. How can I select this parent div and its children in jquery? Parent div has the class "AccordionTitle AccordionTitle-selected"

I have tried following

var klo=$(".AccordionTitle.AccordionTitle-selected").contents()

and

var klo=$(".AccordionTitle.AccordionTitle-selected").children().clone()

but it is only selecting parent div and its children.Its not going deep to the root.I am using jquery 1.9.0

Thanks

[".children() only travels a single level down the DOM tree"](http://api.jquery.com/children/). — moonwave99, Aug 12 '13 at 13:09

score 7 · Accepted Answer · answered Aug 12 '13 at 13:08

7

You can use the , separator in order to select multiple queries. Something like this should do.

var klo=$(".AccordionTitle.AccordionTitle-selected, .AccordionTitle.AccordionTitle-selected > *")

This will select the element itself as well as elements right beneath the element itself in the DOM tree.

If you're looking for a solution to find child elements and their child elements too, something like this will do.

var klo=$(".AccordionTitle.AccordionTitle-selected, .AccordionTitle.AccordionTitle-selected *")

The principle is the same, only now you've omitted the > operator which will only allow children right below the original node.

answered Aug 12 '13 at 13:08

Mathias Lykkegaard Lorenzen

15,031
23
100
187

Hi Mathias Lykkegaard Lorenzen, I tried your second option of selecting all child elements with * but its not going to root level.Any other thing which we can try? – user2513420 Aug 12 '13 at 13:21
Thanks Mathias Lykkegaard Lorenzen!! I worked.I was doing typo mistake. – user2513420 Aug 12 '13 at 13:27

score 5 · Answer 2 · answered Aug 12 '13 at 13:12

5

Try .addBack()

var klo=$(".AccordionTitle.AccordionTitle-selected").children().addBack()

answered Aug 12 '13 at 13:12

Arun P Johny

384,651
66
527
531

score 4 · Answer 3 · answered Aug 12 '13 at 13:12

You can use find('*') to select all descendant elements, then addBack to add the parent back into the selection. I've included clone at the end too, if the clone is what you want in the variable.

var klo=$(".AccordionTitle.AccordionTitle-selected").find('*').addBack().clone();

score 3 · Answer 4 · edited Dec 03 '15 at 07:28

3

use find() instead of children()

children():retrieves only the single descendant child.

find("*"):It will retrieve all the descendant elements.

*:Universal Selector.

var klo=$(".AccordionTitle.AccordionTitle-selected").find('*');

edited Dec 03 '15 at 07:28

evandrix

6,041
4
27
38

answered Aug 12 '13 at 13:14

Somnath Kharat

3,570
2
27
51

score 0 · Answer 5 · answered Aug 12 '13 at 13:11

0

var klo = $(".your.classes, .your.classes div");

answered Aug 12 '13 at 13:11

Nabil Kadimi

10,078
2
51
58

How to select an element and its children in jquery?

5 Answers5

Linked