Hide the tree menu at a certain depth I have created this piece of js purely for learning purposes and I was hoping you could code review to see any mistakes / improvements I can make.

Basically I have a tree structure and I will use the depth variable to work out what level of the menu I will display.

Here is the code example: http://jsfiddle.net/nqGbw/5/

HTML

The Tree
&lt;ul&gt;
    &lt;li&gt; &lt;a href="?1"&gt;Root&lt;/a&gt;
        &lt;ul&gt;
            &lt;li&gt; &lt;a href="?2"&gt;Folder 1&lt;/a&gt;
                &lt;ul&gt;
                    &lt;li&gt;&lt;a href="?3"&gt;Folder 1.1&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;&lt;a href="?4"&gt;Folder 1.2&lt;/a&gt;
                    &lt;/li&gt;
                &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li&gt; &lt;a href="?5"&gt;Folder 2&lt;/a&gt;
                &lt;ul&gt;
                    &lt;li&gt;&lt;a href="?6"&gt;Folder 2.1&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt; &lt;a href="?7"&gt;Folder 2.2&lt;/a&gt;
                        &lt;ul&gt;
                            &lt;li&gt;&lt;a href="?8"&gt;Folder 2.2.1&lt;/a&gt;
                            &lt;/li&gt;
                            &lt;li&gt;&lt;a href="?8"&gt;Folder 2.2.2&lt;/a&gt;
                            &lt;/li&gt;
                            &lt;li&gt;&lt;a href="?9"&gt;Folder 2.2.3&lt;/a&gt;
                            &lt;/li&gt;
                        &lt;/ul&gt;
                    &lt;/li&gt;
                &lt;/ul&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;


JS

var calcDepth = function (root) {
    var $parent = $(root).parents('ul');
    var depth = 0;
    while ($parent.length &gt; 0) {
        $parent = $parent.parents('ul');
        depth += 1;
    }
    return depth;
};


var func = function (rootUL, maxDepth) {
    var selectedUL = rootUL;
    $(selectedUL.children('li')).each(function () {
        var Me = $(this);
        if (calcDepth(Me.parent()) == maxDepth) {
            Me.hide();
        }
        if (Me.children('ul').length &gt; 0) {
            var selectedUL = Me.children('ul');
            func(selectedUL, maxDepth);
        }
    });
};
var depth = 2; //Change this to set the depth of the menu
var selectedUL = $("ul");
func(selectedUL, depth);
It would be much easier just to let the CSS selector engine select the elements to hide:

var hideDepth = function(root, depth) {
   root.find('ul').show(); // Make sure all sublists are visible 
   var selector = Array(depth + 1).join(' &gt; li &gt; ul'); // Repeat string
   root.find(selector).hide();
}

var depth = 2; 
var selectedUL = $("#tree");

hideDepth(selectedUL, depth);


NOTE: Add the id tree to the top level ul. Your selector $('ul')selects all lists in the document, not just the top one, so your code was unnecessarily called repeatedly for each sub list.

For the string repeating see: https://stackoverflow.com/questions/1877475/repeat-character-n-times.