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

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

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

演示： http ： //jsfiddle.net/k7272/

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

我该如何实现这一目标？

这是我的Javascript：

// DOM ready $(function() { // Create the dropdown base $("").appendTo("nav"); // Create default option "Go to..." $("", { "selected": "selected", "value" : "", "text" : "Go to..." }).appendTo("nav select"); // Populate dropdown with menu items $("nav a").each(function() { var el = $(this); $("", { "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... }); 

更新小提琴

Answer 3

而不是选择任何后代的“nav a”选择器，使用子运算符：$（“nav> ul> li> a”）。

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