Question

I can’t see why this isn’t working. I have a list, each item has a background image on the anchor. With jQuery I’m trying to remove the background image on the item right before the selected anchor. Here is the 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>

And here is the jQuery I am using to try and remove the background image (using display:none for testing purposes):

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

When I use the following, it works:

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

But as soon as I involve the anchor tag, it stops.

TLDR: Basically I need to select “projects” which is before the selected link, and remove its background image tied to it (to the link, not the list item). Can anyone tell me why that code isn’t working?

Thanks

Answer 1

The <a> link in $('li.selected a') has no previous element. It’s alone as a child of the list element. You would need to go up one level in the DOM to the <li> and then use .prev.

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

jsFiddle example

Or for your specific need:

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