Использование 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

Ваша проблема (из-за которой ваш код не работает должным образом) заключается в том, что 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 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