Как использовать jquery next (), чтобы выбрать следующий div по классу

Question

Я довольно новичок в jquery и борюсь с чем-то, что должно быть довольно простым. Я хочу выбрать предыдущий и следующий div с классом «MenuItem» из div с классом «MenuItemSelected».

HTML

<div id="MenuContainer" class="MenuContainer">
    <div id="MainMenu" class="MainMenu">
        <div class="MenuItem">
            <div class="MenuItemText">Menu Item #1</div>
            <div class="MenuItemImage">images/test1.jpg</div>
        </div>    
        <div class="MenuDividerContainer">
            <div class="MenuDivider"></div>
        </div>
        <div class="MenuItem MenuItemSelected">
            <div class="MenuItemText">Menu Item #2</div>
            <div class="MenuItemImage">images/test2.jpg</div>
        </div>
        <div class="MenuDividerContainer">
            <div class="MenuDivider"></div>
        </div>
        <div class="MenuItem">
            <div class="MenuItemText">Menu Item #3</div>
            <div class="MenuItemImage">images/test3.jpg</div>
        </div>
    </div><!--/ .MainMenu -->
</div><!--/ .MenuContainer -->

Вот jquery для следующего, который, как я думал, должен был сработать.

$('div.MenuItemSelected').next('.MenuItem');

Я тоже пробовал

$('div.MenuItemSelected').nextAll('.MenuItem');

Единственное, что я мог получить на работу, это

$('div.MenuItemSelected').next().next();

Это кажется странным, есть идеи?

Answer 1

Вы пробовали:

$('div.MenuItemSelected').nextAll('.MenuItem:first');

Я думаю, что проблема, с которой вы сталкиваетесь, заключается в том, что next возвращает самого следующего брата, тогда как nextAll возвращает коллекцию всех последующих братьев и сестер, соответствующих вашему селектору. Применение селектора :first к фильтру nextAll должно исправить ситуацию.

Я хотел бы отметить, что если структура вашей разметки непротиворечива (так что она всегда гарантированно работает), то ваше текущее решение может (бенчмарк, бенчмарк, бенчмарк) будет быстрее способ:

$('div.MenuItemSelected').next().next();

Answer 2

Вы пробовали: .parent () и .children ()? http://docs.jquery.com/Traversing