jQuery - 选择上一个元素链接答案

【问题标题】：jQuery - selecting previous element linkjQuery - 选择上一个元素链接
【发布时间】：2012-08-05 03:32:37
【问题描述】：

我不明白为什么这不起作用。我有一个列表，每个项目在锚点上都有一个背景图像。使用 jQuery，我试图在所选锚点之前删除项目上的背景图像。这是 HTML：

<ul id="menu">
<li class="last"><a href="#">Contact Us</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Projects</a></li>
<li class="selected"><a href="#">Our Services</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Home</a></li>
</ul>

这是我用来尝试删除背景图像的 jQuery（使用 display:none 进行测试）：

$('li.selected a').prev().css( {display : "none"});

当我使用以下内容时，它可以工作：

$('li.selected').prev().css( {display : "none"});

但是一旦我涉及到锚标记，它就会停止。

TLDR：基本上我需要选择所选链接之前的“项目”，并删除与其相关的背景图像（链接，而不是列表项）。谁能告诉我为什么该代码不起作用？

谢谢

【问题讨论】：

标签： jquery css jquery-selectors

【解决方案1】：

$('li.selected a') 中的 <a> 链接没有前一个元素。它作为列表元素的子元素单独存在。您需要在 DOM 中上一层到<li>，然后使用.prev。

点赞$('li.selected a').parent().prev().css( {display : "none"});

jsFiddle example

或根据您的特定需求：

$('li.selected a').parent().prev().children('a').css( {backgroundImage : "none"});

【讨论】：

【解决方案2】：

.prev(0) 和.next() 分别从所选元素的上一个和下一个兄弟中选择。出于您的目的，这将起作用：

$('li.selected').prev().find("a").css( {display : "none"});

【讨论】：