Recursive JQuery function to navigate a list

Question

I'm looking to traverse a tree I've created using ul elements. I realize this can be done more easily using the appropriate selector, but I'd like to create a recursive function to do this.

The idea is to move down the tree and turn on all the sub lists while adding the class 'on' to li:first-child elements to turn the list on and highlight first items in each list. Here's how I'm going about it:

function showAllFirstDiv(topnav) {
    $(topnav).show();
    $(topnav + ' > li:first').addClass('on');
    if ($(topnav + ' > li:first > ul:first').length)
    {
        var childUL = $(topnav + ' > li:first > ul:first');
        showAllFirstDiv(childUL);
    }   
    else
    return true;
}

and I'm calling:

showAllFirstDiv('.top');

It turns on the .top ul and the first child ul ( .top > li > ul ) as well as turning .top > li:first-child on but stops there giving me the jQuery error 'Uncaught Syntax error, unrecognized expression: [object Object]'

I'm assuming I'm mixing up jQuery and JavaScript elements, but can't seem to figure out exactly what the problem is.

I'm new to JavaScript/jQuery and any help or other basic pointers are appreciated. Thanks.

Damien-Wright · Accepted Answer · 2011-01-28 04:53:52Z

2

The function showAllFirstDiv() requires a string which is then used as a selector for the jQuery object...

The childUL variable that you are handing to the function is actually a jQuery object...

To solve the problem, do the following:

function showAllFirstDiv(topnav) {
    $(topnav).show();
    $(topnav + ' > li:first').addClass('on');
    if ($(topnav + ' > li:first > ul:first').length)
    {
        var childUL = topnav + ' > li:first > ul:first';
        showAllFirstDiv(childUL);
    }   
    else
    return true;
}

Note, childUL is now a string (that becomes the selector) instead of the DOM element object.

Hope that helps :)

answered Jan 28, 2011 at 4:53

Damien-Wright

7,5844 gold badges30 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Recursive JQuery function to navigate a list

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related