You are given a DOM tree and have to analyze the ul and ol list tags within it. Your task is to find the maximum depth of nested ul/ol list tags. A single ul/ol list is nested one level deep. Each ul/ol list inside another ul/ol list is nested one level deeper. If there are no ul or ol lists at all in the DOM tree, the depth of nesting is 0.
Note that ul/ol lists can be nested directly or indirectly; that is, a ul list inside a table inside an ol list is nested two levels deep.
For example, given an HTML document with the following contents within the body tag:
<ul> <li>Item: <ol> <li>Point: <div> <ul> <li>elem1</li> </ul> </div> </li> </ol> </li> <li>elem2</li> </ul> <ul> <li>simple list1</li> </ul>
there is a ul list nested three levels deep. Namely, “elem1” is in a ul list which is inside an ol list containing “Point”, while this ol list is inside another ul list containing “Item”.
Write a function that, given a DOM tree, returns the maximum depth of nested ul/ol lists. For example, given the DOM tree of the document shown above, the function should return 3, as explained above.
Given the following content:
<ol> <li> <ul> <li></li> </ol> </li> </ol>
the function should return 2.
Assume that:
- the DOM tree represents a valid HTML5 document;
- length of the HTML document does not exceed 4KB;
- jQuery is supported.
function maxDepth() { var maxDepth = 0, tempDepth, parents, targetSelector = 'ul, ol'; $(targetSelector).each( function() { parents = $(this).parents(targetSelector); tempDepth = 1; if (parents) { tempDepth = parents.length + 1; } if (tempDepth > maxDepth) { maxDepth = tempDepth; } }); return maxDepth; }