Question

我的菜单结构如下：

<li><a href="#" class="navCars">Cars</a><img src="images/navbar-menu-divider.png" class="divider"></li>
<li><a href="#" class="navTrucks">Trucks <img src="images/navbar-menu-down-arrow.png/"></a><img src="images/navbar-menu-divider.png" class="divider"></li>
<li><a href="#" class="navBoats">Boats <img src="images/navbar-menu-down-arrow.png/" class="menu_arrow"></a><img src="images/navbar-menu-divider.png" class="divider"></li>

对于支持下拉列表的Trucks and Boats项目，我需要在鼠标悬停时将.divider图像更改为给定菜单项的左侧和右侧。我已经尝试过这个选择器来抓住右侧：

$( ":parent .divider", this ).attr( "src", "images/navbar-menu-hover-right.png" );

这似乎不起作用。为了得到左侧，我需要升级，找到前一个兄弟，然后得到它的.divider（虽然我确定有几种选择）。

来自jquery魔术师的任何帮助表示赞赏！

Answer 1

我们走了。

$("~ .divider", this)

应该抓住元素的兄弟。在这种情况下.divider。

如果您确定兄弟（.divider）就在您的dom元素旁边，那么

$("+ .divider", this)

+和〜之间的区别是：+只选择直接兄弟，〜选择后一个兄弟姐妹。

Answer 2

您可以尝试.closest()。

$(this).closest('li').find('.divider').attr("src","images/navbar-menu-hover-right.png");

Answer 3

有一个.siblings助手

$("...").siblings(".divider")

公共父级的选定兄弟姐妹的jquery选择器

3 个答案: