jQuery选择下一个元素

Question

我有以下菜单结构。

<li class="menu-422"><a href="item-1" title="">Item 1</a></li>
<li class="menu-444"><a href="item-2" title="">Item 2</a></li>
<li class="menu-449"><a href="item-3" title="">Item 3</a></li>
<li class="menu-452"><a href="item-4" title="">Item 4</a></li>

在这个结构中，项目（a-tag）具有背景。我想在悬停事件中更改下一个项目的背景色。如果我在第二个项目上，则希望更改第三个项目的背景色。我尝试使用jQuery，但是我没有找到合适的代码。

jQuery("#mymenu li a").hover(function() {
  jQuery(this).next("li a").css('background', 'none');
}

我尝试使用nextAll，并且使用完整的选择器路径，但是我无法选择下一个元素。

- danyg

Answer 1

在悬停的时候，你想要找到父级 li，然后使用 next() 找到下一个 li，再在该 li 中查找 a：

$("#mymenu li a").hover(function() {
    $(this).parent().next().find("a").css('background', 'none');
});

- Joseph Silber

Answer 2

不必选择锚点，只需选择li并在其上附加hover事件。在悬停时，只需使用next方法获取下一个li元素并更改背景即可。我假设您没有将背景设置为锚点，因为我正在更改li元素的背景。

$("#mymenu li").hover(function() {
    $(this).next().css('background', 'none');
    //If you want to change the background of anchor try this
    //$(this).next().find('a').css('background', 'none');
}

- ShankarSangoli