Jquery if hasClass then addClass

Question

I know I can do this, I'm just getting lost in the hierarchy and need a second set of eyes on this. Here's the structure 'm working with: ```

Underlying Div

``` I am looking to do the following: when you hover over a `.nav-column ul li a` that visibility of `div.home` would turn off. Of course there are going to be multiple .nav-columns so I'm making this dynamic. The jQuery I have right now is: ``` if ($('.nav-column li').hasClass('active')){ $(this).parent('.nav-column').sibling('div.home').toggleClass("off"); } ``` without yielding any class addition to the div.home. I already have a hover function adding and removing the class `'.active'` to the `.nav-column li` EDIT EDIT EDIT I…

Accepted Answer

Think this is what you want:

```
$('.nav-column li').each(function(){
    if($(this).hasClass('active')) {
        $(this).closest('.nav-column').siblings('div.home').toggleClass("off");
    } 
});
```

Fiddle:

http://jsfiddle.net/Jf8mp/

Your mistakes:

`.sibling('div.home')` is wrong, the correct name of method is `.siblings()`

if condition doesnt determine who is `$(this)`, you have use a function as `.each()`

UPDATED:

to make it work on hover over `.nav-column ul li a`:

```
$('.nav-column li').on('mouseenter','a',function(){
    if($(this).closest('li').hasClass('active')) {
        $(this).closest('.nav-column').siblings('div.home').toggleClass("off");
    } 
});
```

Fiddle:

http://jsfiddle.net/Jf8mp/2/

Jquery if hasClass then addClass

Solution

Problem