jquery查找上一个li并更改css答案

【问题标题】：jquery find previous li and change cssjquery查找上一个li并更改css
【发布时间】：2010-12-19 14:31:05
【问题描述】：

我正在尝试编写一个脚本，允许我在悬停时更改前一个 li 的 css。

结构如下：

<ul id="mainlevel">
  <li><a href="/" class="mainlevel" id="active_menu">Home</a></li>
  <li><a href="/" class="mainlevel">About Us</a></li>
  <li><a href="/" class="mainlevel">Products</a></li>
  <li><a href="/" class="mainlevel">Projects</a></li>
  <li><a href="/" class="mainlevel">Suppliers</a></li>
</ul>

这是我目前所拥有的：

jQuery("#mainlevel li a").hover(function() {
    jQuery(this).prev("li a").css("background", "#f0f");
  });

但它不起作用..任何帮助将不胜感激:)

【问题讨论】：

没有测试任何东西，您是否尝试过从.prev('li a') 中删除a？
是的，我运气不好
您要操作之前悬停的 li，还是文档中悬停元素之前的 li？

标签： jquery css hover

【解决方案1】：

以下似乎有效：

$(document).ready(
  function() {
    $('li a').hover(
      function(){
       $(this).parent().prev('li').css('background-color','#f0f'); 
      }
      );
  }
  );

尽管li 不再悬停时我没有删除背景颜色。

演示地址：JS Bin。

【讨论】：

@SoulieBaby，发布了这个答案后，我突然想问：你确定要更改li 的背景，而不是孩子a 元素？
哦，这是为了改变 a，但我使用了你给我的东西并添加了 .find("a") 让它为我工作，谢谢！ :)

【解决方案2】：

你可以试试这个

jQuery(this).parent().prev("li").children("a").css("background", "#f0f");

我认为 prev() 方法仅适用于当前元素的兄弟姐妹。这就是为什么你必须先获取当前元素的父元素，然后再获取上一个元素

【讨论】：