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

ohtdti5x  于 2023-06-22  发布在  jQuery
关注(0)|答案(4)|浏览(118)

我在这里遇到了一个小问题,我想使用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”是红色的。在这种情况下我能做什么?
任何帮助都是感激的,谢谢。
注意:这只是一个示例问题,我实际上试图创建通过列表项的导航,但认为这段代码作为示例会更容易。

rt4zxlrg

rt4zxlrg1#

您的问题(导致代码无法按预期工作)是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/

42fyovps

42fyovps2#

这将为你的榜样。

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

对于最后一个列表元素

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

voj3qocg3#

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

可能会工作,不确定:),尝试一下

ppcbkaq5

ppcbkaq54#

使用.nextAll()并过滤到第一个可以工作,即使它可能不是最有效的方法:

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

jsFiddle demo

相关问题