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

Posted 2023-02-25

【中文标题】使用 jQuery next() 并忽略嵌套列表？

【英文标题】：Using jQuery next() and ignoring nested lists?

【发布时间】：2012-02-21 07:43:59

【问题描述】：

我在这里遇到了一个小问题，我想使用 next() 但我想忽略嵌套列表...如何做到这一点？现在 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”是红色的……在这种情况下我该怎么办？

感谢您的帮助，谢谢。

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

【问题讨论】：

简单试过$(".selected").siblings().next().css("color", "red"); ?

【参考方案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/

【讨论】：

谢谢，这正是我所需要的。嵌套列表应该堆叠在标签之外。我什至不知道 nextAll 的存在。

【参考方案2】：

这将适用于您的示例。

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

对于最后一个列表元素

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

【讨论】：

仅用于示例。如果在“3”之后有额外的<li>s 会发生什么？你的代码不起作用。

对于最后一个列表元素 $("li.selected").nextAll('li:last').css("color", "red");

我可能错了，但问题的初衷是获取下一个不是嵌套<ul> 的<li> 元素。在他给出的示例中，它也恰好是他所追求的最后一个元素，但这与他发布的示例 HTML 无关且特定。如果所选的<li> 后面有多个<li>，则使用.last() 将无济于事。

【参考方案3】：

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

可能有用，不确定:)，试试看

【讨论】：

很遗憾没有。但是，由于您还是该站点的新手，因此我不会对您投反对票。在可能的情况下，在发布之前使用jsFiddle.net 之类的内容测试您的答案。哦，欢迎！

是的，谢谢 :) 好吧，我现在在学校，所以我无法测试它

太棒了，终于可以有效地利用上学时间了！ ;-) 你意识到 jsFiddle 只是一个网站，对吧？只需在另一个选项卡中打开 http://jsfiddle.net。学会爱它。

【参考方案4】：

使用.nextAll() 并过滤到第一个会起作用，即使它可能不是最有效的方法：

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

jsFiddle demo