从选择菜单中删除嵌套选项 - jQuery

Question

I have a simple bit of Javascript.

Is it possible to remove any nested parts of this menu when it becomes a select menu?

So in the demo below, the '- test' part wouldn't appear in the select menu.

DEMO: http://jsfiddle.net/ZBZRw/

My jQuery is:

$(function() {

            var options = '<option selected>Go to...</option>';
            $('nav div.alt').find('a').each(function () {
                var text = $(this).text(),
                purl = $(this).attr("href"),
                    depth = $(this).parent().parents('ul').length,
                    depthChar = '',
                    i = 1;
                for (i; i < depth; i++) { depthChar += '&ndash;&nbsp;'; }
                options += '<option value="' + purl + '">' + depthChar + text + '</option>';
            });
            $('<select />').append(options).appendTo('nav div.alt');

            $("nav select").change(function() {
                window.location = $(this).find("option:selected").val();
            });

        });

Many thanks for any advice.

Answer 1

Use the child selector > to be more exact in the <a> elements that you select

$('nav div.alt > ul > li > a').each(function () {

http://jsfiddle.net/ZBZRw/1/