How to traverse through the children div recursively

Question

i am having the div structure like this, which will be like children-grandchildren-great grand-children and so on repeatedly as the div structure end is unknown. so my question is How to traverse recursively until the last div.

<div class="parent">
    <div class"con">
        <div class="app">
            <div class"con">
                <div class="app">
                    <div class"con">
                        <div class="app">
                            <div class"con">
                                <div class="app">
                                </div>
                                <div class="disapp">
                                </div>
                            </div>
                        </div>
                        <div class="disapp">
                            <div class"con">
                                <div class="app">
                                </div>
                                <div class="disapp">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="disapp">
                    <div class"con">
                        <div class="app">
                        </div>
                        <div class="disapp">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="disapp">
            <div class"con">
                <div class="app">
                    <div class"con">
                        <div class="app">
                        </div>
                        <div class="disapp">
                        </div>
                    </div>
                </div>
                <div class="disapp">
                    <div class"con">
                        <div class="app">
                        </div>
                        <div class="disapp">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

I found a solution like this - Jquery tree traversal - Nested Unordered list elements to JSON, but here list tag is only processed but in my case I want all the div to be processed as JSON.

When you say the last DIV, do you mean you're trying to reach the deepest nested DIV...? Also, your DIV structure would be much more readable if it were tabbed nicely. — BRW, May 24 '14 at 07:04
What are you ultimately trying to do? Are you trying to represent the DOM structure as JSON data? — cookie monster, May 24 '14 at 07:08
@cookiemonster yes , I want to traverse through the div and fetch the div values to create json. — Strawberry, May 24 '14 at 07:12
That other question pretty much shows how. You just need to get rid of the specific selectors, and always select children. Anyway, something like this: http://jsfiddle.net/f69qb/ It excludes text nodes, but that's a simple change to use `.childNodes` instead of `.children` — cookie monster, May 24 '14 at 07:19
@VedantTerkar thank u , In your link it is traversing through one branch,how to traverse other branches? — Strawberry, May 24 '14 at 07:24
@cookiemonster In that function process u have passed the node as argument, is it possible to pass the class name of div? — Strawberry, May 24 '14 at 09:02

score 0 · Answer 1 · answered May 24 '14 at 08:14

0

if you can use jQuery, then you could just do something like $(".parent").find( div:last'). If you want to do it for each level, then you'd have to $(".parent" ).find( "div" ).each(... and traverse that way

answered May 24 '14 at 08:14

Jonathon Hibbard

1,547
13
20

How to traverse through the children div recursively

1 Answers1