如何使用jquery next()按类选择下一个div

时间:2009-11-16 16:59:56

标签: jquery

我对jquery相当陌生并且努力应对相当简单的事情。我想从类“MenuItemSelected”的div中选择带有“MenuItem”类的上一个和下一个div。

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();

看起来好像有什么想法?

2 个答案:

答案 0 :(得分:40)

你试过了吗?

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

我认为您面临的问题是next会返回下一个兄弟,而nextAll会返回与您的选择器匹配的所有后续兄弟的集合。将:first选择器应用于nextAll过滤器可以使事情正确。

我想指出,如果你的标记结构是一致的(所以它始终保证可以工作),那么你当前的解决方案可能(基准,基准,基准)很好更快的方式:

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

答案 1 :(得分:3)

您是否尝试过:.parent()和.children()? http://docs.jquery.com/Traversing