Question

我有一点点脚本允许用户调整窗口大小，将无序列表转换为选择菜单。

但是，我想从选择菜单中删除任何嵌套的无序列表。

所以基本上使用上面的例子，部分'test'不会出现在选择菜单中，但仍然会出现在无序列表中。

我如何实现这一目标？

这是我的Javascript：

// DOM ready
     $(function() {

      // Create the dropdown base
      $("<select />").appendTo("nav");

      // Create default option "Go to..."
      $("<option />", {
         "selected": "selected",
         "value"   : "",
         "text"    : "Go to..."
      }).appendTo("nav select");

      // Populate dropdown with menu items
      $("nav a").each(function() {
       var el = $(this);
       $("<option />", {
           "value"   : el.attr("href"),
           "text"    : el.text()
       }).appendTo("nav select");
      });

       // To make dropdown actually work
       // To make more unobtrusive: http://css-tricks.com/4064-unobtrusive-page-changer/
      $("nav select").change(function() {
        window.location = $(this).find("option:selected").val();
      });

     });

非常感谢:-D

Answer 1

定位nav a会找到所有孩子甚至是孩子的孩子，所以你需要像这样直接定位他们

$("nav > ul > li > a").each(...

http://jsfiddle.net/k7272/1/

Answer 2

将选择器更改为仅查找直接子项，这将避免嵌套ul。试试这个：

$("nav > ul > li > a").each(function () {
    // your code...
});

Updated fiddle

Answer 3

使用子操作符代替选择任何后代的“nav a”选择器：$（“nav＆gt; ul＆gt; li＆gt; a”）。

更好的是，将一个类放在你的顶级ul上，然后使用$（'ul.classname＆gt; li＆gt; a'），然后你就可以围绕你的DOM移动整个列表，并且仍然可以让选择器工作。

使用jQuery从选择菜单中删除列表项

3 个答案: