Question

So, take this html for example:

<ul>
    <li>
        <a href="#">Test</a>

        <ul>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Test</a>

        <ul>
            <li><a href="#">Test</a></li>
            <li>
                <a href="#">Test</a>

                <ul>
                    <li><a href="#">Test</a></li>
                    <li><a href="#">Test</a></li>
                    <li><a href="#">Test</a></li>
                    <li><a href="#">Test</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

I want to find out the maximum depth of this structure, in this example it would be 3, as the structure goes 3 levels down. But the structure can have an arbitrary depth.

Either a javascript/jquery solution or a PHP based solution using the DOM extension would be fine. I really cant think of any nice way of doing this. Maybe there is an xpath expression that does exactly what I want?

EDIT: To clarify: Depth in this case is the maximum nesting of ul elements, in this case 3.

Answer 1

If you didn’t want to have to specify the lowest selector, this will give you the maximum number of nest levels:

var n = 0

$('ul').each(function(i){ 
    if (($(this).parents('ul').length + 1) > n) { n = $(this).parents('ul').length + 1; }
});

Edit: the variable n contains the number of nest levels, so for the example above, 3.