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

Posted 2023-02-25

【中文标题】如何使用 jquery next() 按类选择下一个 div

【英文标题】：How to use jquery next() to select next div by class

【发布时间】：2009-11-16 16:59:55

【问题描述】：

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

这看起来很古怪，有什么想法吗？

【参考方案1】：

你试过了吗：

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

我认为您面临的问题是 next 返回下一个兄弟，而 nextAll 返回与您的选择器匹配的所有后续兄弟的集合。将:first 选择器应用于nextAll 过滤器应该可以解决问题。

我想指出，如果你的标记结构是一致的（所以它总是保证工作），那么你当前的解决方案可能（基准、基准、基准）很可能是更快的方法：

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

【讨论】：

谢谢！！但是，它仅适用于 .MenuItem 和 :first EG: $('div.MenuItemSelected').nextAll('.MenuItem:first')

之间没有空格的情况

@Aros - 我的错，在答案中修复了它。希望没有让你在圈子里跑太久:)

【参考方案2】：

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