Использование jQuery next () и игнорирование вложенных списков?

Question

У меня небольшая проблема, я хочу использовать 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» была красной ... Что я могу сделать в этой ситуации?

Любая помощь приветствуется, спасибо.

ПРИМЕЧАНИЕ. Это только примерная проблема.Я на самом деле пытаюсь создать навигацию по элементам списка, но подумал, что этот код будет проще для примера.

Answer 1

Это будет работать для вашего примера.

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

Для последнего элемента списка

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

Answer 2

Ваша проблема (из-за которой ваш код не работает должным образом) заключается в том, что тег 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 был таким, какой он есть, и вы просто хотите выбрать следующий тег li, который находится на том же уровне, что и элемент .selected, то вам нужен другой jQuery, потому что .next() будет выберите следующего брата, который является тегом ul. Вам нужно что-то вроде этого:

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

При этом будут проверены все следующие братья и сестры и выбраны те, которые соответствуют селектору 'li:first' (который получит только первый тег li).

которую вы можете увидеть здесь: http://jsfiddle.net/jfriend00/QrUtL/

Answer 3

Использование .nextAll() и фильтрация к первому будут работать, даже если это не самый эффективный способ:

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

jsFiddle demo

Answer 4

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

может работать, не уверен :), попробуйте