How do I get the level of depth of a list?

Question

the list can be asymmetric
x number of "li" or "ul" nested

x number of li or ul

for example: A list of Level 2

<ul>
    <li>1
    </li>
    <li>2
        <ul>
            <li>2.1</li>
            <li>2.2</li>
            <li>2.3</li>
        </ul>
    </li>
    <li>3
    </li>
</ul>

A list of Level 3

<ul>
    <li>1
    </li>
    <li>2
        <ul>
            <li>2.1
                <ul>
                    <li>2.1.1</li>
                 </ul>
            </li>
            <li>2.2</li>
            <li>2.3</li>
        </ul>
    </li>
    <li>3
    </li>
</ul>

actually, this is a decent question, even without guesses posted. it highlights the limits of the DOM for what should be simple but aint. i wonder the simplest way to do this... — dandavis, Aug 11 '14 at 21:21
@j08691: not so fast: according to that formula, http://jsfiddle.net/nghea3ot/2/ has a depth of 4 instead of 2. it's actually a fun question and a lot tougher than meets the eye — dandavis, Aug 11 '14 at 21:25
@dandavis I see your point, but I would call that a malformed list. — Evan Davis, Aug 11 '14 at 21:26
I think @SterlingArcher's idea is still the best one, paired with a [deepest child search](http://stackoverflow.com/questions/3787924/select-deepest-child-in-jquery). Find the deepest `li` and then count its parents. — Evan Davis, Aug 11 '14 at 21:33

dandavis · Accepted Answer · 2014-08-11T23:03:06.597

2

one way i came up with:

function getDepth(list){
     for(var depth=0; list.querySelector(Array(depth++ +3).join(list.tagName+" ")) ;  );
    return depth;
}

// example usage:
getDepth(  document.getElementsByTagName"ul")[0]  );

there may be better solutions, but this seems to work, and avoids the heavy iteration of a deepest child search, so it should be decently fast as well.

see fiddle to kick the tires: http://jsfiddle.net/nghea3ot/4/

i know this question's not getting a lot of love around here, but it's a great question with poor/na existing answers...

edited Aug 11 '14 at 23:03

answered Aug 11 '14 at 21:54

dandavis

16,370
5
40
36

thought I had a solution with jquery (selector or a method already) the solution and create a function to do it – ch2o Aug 11 '14 at 23:16

How do I get the level of depth of a list?

1 Answers1