Maximum depth of nested ol/ul

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;
}