jquery - 使用 JQuery for Mobile Version 从导航创建选择/下拉列表

Question

我正在开发一个需要响应的网站。我想将导航转换为 <select> 。可以有任意数量的 <nav>以及任意数量的<ul>里面<nav> 。我用过for loops计算<nav> and <ul> inside <nav>的数量.

一个正在生成，另一个不生成，请帮我解决这个问题。

here is the jsfiddle

Answer 1

它不起作用，因为您正在寻找.children('ul')，并且这只包括直接后代，但是您的第二个nav 有一个 div 包裹在 ul...

您可以将 .children 调用更改为 .find，它会在任意深度查找后代

-- 切到这里--

替代解决方案:

$('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...

    });
});