CODEWITHSUNDEEP
jquery
saltcod
saltcod

Reputation: 2031

jQuery if a link hasClass, apply a class to its parent

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/

Upvotes: 2

Views: 2331

Answers (9)

yunzen
yunzen

Reputation: 33439

Set the class="yellow" on the li if you click on the a. Don't give an extra class="on" to the a.

http://jsfiddle.net/HerrSerker/GY2qP/8/

$("li a")
    .click(function(e) {
        //stop browser default
        e.preventDefault();

        //remove on states for all nav links
        $(this).parent().siblings().removeClass("yellow");

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

    })
.end();

​

p {margin: 1em 0; } strong {font-weight: bold }

ol {width: 125px;background: #eee; }

li { padding: 10px; border-bottom: 1px solid;}

.yellow a {background: #ccc; }

.yellow {background: #ffff00;}
​

<ol>
    <li class="yellow"><a href="#"> A</a> </li>
    <li><a href="#"> B</a> </li>
    <li><a href="#"> C</a> </li>
</ol>

Upvotes: 0

The Alpha
The Alpha

Reputation: 146201

$("li a").click(function(e){

  //stop browser default
  e.preventDefault();

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

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

});

A fiddle is here.

Upvotes: 0

Matt Ball
Matt Ball

Reputation: 359846

I think this is what you're looking for.

var $lis = $('li'),
    $links = $lis.children('a');

$links.click(function(e){

    //stop browser default
    e.preventDefault();

    var $this = $(this);

    //remove on states for all nav links
    $links.removeClass('on');
    $lis.removeClass('yellow');

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

​

http://jsfiddle.net/mattball/sQckP/

Upvotes: 0

Chetter Hummin
Chetter Hummin

Reputation: 6817

Just replace the line

$('li a').parent().addClass('yellow');

with

$(this).parent().addClass('yellow');

Upvotes: 0

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79830

Something like below should do the trick,

Edit: Simplified your code...

$("li a").click(function(e){

    //stop browser default
    e.preventDefault();

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

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

});

DEMO

Upvotes: 0

tobias86
tobias86

Reputation: 5029

In your fiddle, change your code to 

if ( $(this).hasClass('on') ){ 
    $(this).parent().addClass('yellow'); 
}

Upvotes: 0

Paul
Paul

Reputation: 141827

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

Upvotes: 1

ninja
ninja

Reputation: 2263

if($('a').hasClass('on')) {
     $(this).parent().addClass('active');
}

?

Upvotes: 1

kinakuta
kinakuta

Reputation: 9037

This should do it:

$('a.on').parent('li').addClass('active');

http://jsfiddle.net/rdrsd/

Upvotes: 5

Related Questions