使用 jQuery next() 并忽略嵌套列表？

Question

我在这里遇到一个小问题，我想使用 next() 但我想忽略嵌套列表...这该怎么办？现在接下来将选择主列表和嵌套列表。

所以说我有......

<ul id="mainlist">
<li>1</li>
<li class="selected">2</li>
    <ul id="nested">
    <li>A</li>
    <li>B</li>
    <li>B</li>
    </ul>
<li>3</li>
</ul>

$(".selected").next().css("color", "red");

在这种情况下，整个“嵌套”列表颜色变为红色。但我希望“3”是红色的......在这种情况下我能做什么？

如有任何帮助，我们将不胜感激，谢谢。

注意：这只是一个示例问题，我实际上正在尝试通过列表项创建导航，但认为此代码对于示例来说会更容易。

Answer 1

您的问题（导致您的代码无法按预期工作）是 ul 标记实际上并未嵌套在 li 标记中。 ul 标签是同一级别的 li 标签之后的下一个标签。如果您的意思是嵌套，那么您的 HTML 应该如下所示：

<ul id="mainlist">
<li>1</li>
<li class="selected">2
    <ul id="nested">
    <li>A</li>
    <li>B</li>
    <li>B</li>
    </ul>
</li>
<li>3</li>
</ul>​

然后您的代码将按需要工作。你可以在这里看到： http://jsfiddle.net/jfriend00/nfbPp/

如果你真的想说对于 HTML 来说，您只想选择与 .selected 项处于同一级别的下一个 li 标记，那么您需要不同的 jQuery，因为.next() 将选择下一个同级，即 ul 标记。您需要这样的东西：

$(".selected").nextAll('li:first').css("color", "red");​

这将检查以下所有兄弟姐妹并选择与选择器 'li:first' 匹配的兄弟姐妹（这将仅获取第一个 li 标记）。

您可以在这里看到它的工作： http://jsfiddle.net/jfriend00/QrUtL/

Answer 2

这适用于您的示例。

$("li.selected").nextAll('li').css("color", "red");

对于最后一个列表元素

$("li.selected").nextAll('li:last').css("color", "red"); 

Answer 3

 $(".selected").next().not('.selected #nested').css("color", "red");

可能有用，但不确定:)，尝试一下

Answer 4

使用 .nextAll() 并过滤到第一个就可以了，即使尽管这可能不是最有效的方法：

$(".selected").nextAll('li').first().css("color", "red");​​​​​

jsFiddle demo