Question

I am working on a website which needs to be responsive. I want to convert the navigation into a <select>. There can be any number of <nav> and any number of <ul> inside<nav>. I have used for loops to calculate number of <nav> and <ul> inside <nav>.

One is generating and the other one is not generating, please help me out to resolve this.

here is the jsfiddle

Answer 1

It does not work, because you’re looking for .children('ul') and this only includes immediate descendants, however your second nav has a div wrapped around the ul…

You could change .children call to .find which looks for descendants at any depth

— CUT HERE —

Alternative solution:

$('nav').each(function(navIndex, navElement) {

    $(this).find('ul').each(function(ulIndex, ulElement) {

        var $sel = $('<select name="nav'+navIndex+'-'+ulIndex+'" />');
        $sel.append('<option value="#">Go to...</option>');
        $sel.change(function() { document.location.href = this.value; });

        $(this).find('li>a').each(function(aIndex, aElement) {
            $sel.append('<option value="' + this.href + '">' + $(this).text() + '</option>');
        });

        $(this).after($sel); // place this select after the ul...

    });
});