我在这里遇到了一个小问题,我想使用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”是红色的。在这种情况下我能做什么?
任何帮助都是感激的,谢谢。
注意:这只是一个示例问题,我实际上试图创建通过列表项的导航,但认为这段代码作为示例会更容易。
4条答案
按热度按时间rt4zxlrg1#
您的问题(导致代码无法按预期工作)是
ul
标记实际上没有嵌套在li
标记中。ul
标记是同一级别li
标记之后的下一个标记。如果你的意思是它是嵌套的,那么你的HTML应该看起来像这样:然后,你的代码将按照你想要的那样工作。你可以在这里看到:http://jsfiddle.net/jfriend00/nfbPp/
如果你实际上是想让HTML保持原样,并且你只想选择下一个与
.selected
项处于同一级别的li
标记,那么你需要不同的jQuery,因为.next()
将选择下一个兄弟标记,即ul
标记。你需要这样的东西:这将检查所有后续的兄弟节点,并选择与选择器
'li:first'
匹配的节点(这将只获得第一个li
标记)。你可以在这里看到:http://jsfiddle.net/jfriend00/QrUtL/
42fyovps2#
这将为你的榜样。
对于最后一个列表元素
voj3qocg3#
可能会工作,不确定:),尝试一下
ppcbkaq54#
使用
.nextAll()
并过滤到第一个可以工作,即使它可能不是最有效的方法:jsFiddle demo