Question

I’ve got a simple list:

<ol>
    <li><a href="#" class="on"> I'm on</a> </li>
    <li><a href="#"> I'm off</a> </li>
    <li><a href="#"> I'm off</a> </li>
</ol>

I want apply a class to the <li> if the <a> it contains has the class on.

IE: I want to change from

<li><a href="#" class="on"> I'm on</a> </li>

to:

<li class="active"><a href="#" class="on"> I'm on</a> </li>

There’s 100 better ways to do this using just css, but all involve refactoring a complicated slider I have setup. If I could use the a.on to affect its .parent(), I’d be all set.

Le fiddle: http://jsfiddle.net/saltcod/GY2qP/1/

Answer 1

You were settings the parent of all anchors inside lis to be yellow if any anchor ahd the class on.

Use this instead:

//remove on states for all nav links
$("li a").removeClass("on");
$("li").removeClass("yellow");

//add on state to selected nav link
$(this).addClass("on");
$(this).parent().addClass('yellow');

Updated JS Fiddle