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:

<div class="nav-column">
    <ul>
        <li><a href="#">Link 01</a>
            <div>
                <ul>
                    <li><a href="#">Sublink 01</a></li>
                    <li><a href="#">Sublink 02</a></li>
                    <li><a href="#">Sublink 03</a></li>
                </ul>
            </div>
        </li>
        <li><a href="#">Link 02</a></li>
        <li><a href="#">Link 03</a></li>
    </ul>
    <div class="home"><h3>Underlying Div</h3></div>
</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 see that I have made a mistake with my code, and in fact the correct code has the div.home OUTSIDE the div.nav-column

This is the proper heirarchy:

<div class="wrapper">
    <div class="nav-column">
        <ul>
            <li><a href="#">Link 01</a>
                <div>
                    <ul>
                        <li><a href="#">Sublink 01</a></li>
                        <li><a href="#">Sublink 02</a></li>
                        <li><a href="#">Sublink 03</a></li>
                    </ul>
                </div>
            </li>
            <li><a href="#">Link 02</a></li>
            <li><a href="#">Link 03</a></li>
        </ul>
    </div>
    <div class="home"><h3>Underlying Div</h3></div>
</div>

Once again... I am very sorry... you can sense my sanity levels dropping

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:

<div class="nav-column">
    <ul>
        <li><a href="#">Link 01</a>
            <div>
                <ul>
                    <li><a href="#">Sublink 01</a></li>
                    <li><a href="#">Sublink 02</a></li>
                    <li><a href="#">Sublink 03</a></li>
                </ul>
            </div>
        </li>
        <li><a href="#">Link 02</a></li>
        <li><a href="#">Link 03</a></li>
    </ul>
    <div class="home"><h3>Underlying Div</h3></div>
</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 see that I have made a mistake with my code, and in fact the correct code has the div.home OUTSIDE the div.nav-column

This is the proper heirarchy:

<div class="wrapper">
    <div class="nav-column">
        <ul>
            <li><a href="#">Link 01</a>
                <div>
                    <ul>
                        <li><a href="#">Sublink 01</a></li>
                        <li><a href="#">Sublink 02</a></li>
                        <li><a href="#">Sublink 03</a></li>
                    </ul>
                </div>
            </li>
            <li><a href="#">Link 02</a></li>
            <li><a href="#">Link 03</a></li>
        </ul>
    </div>
    <div class="home"><h3>Underlying Div</h3></div>
</div>

Once again... I am very sorry... you can sense my sanity levels dropping

• javascript
• jquery
• html
• css

• But, div.home is not a sibling of .nav-column though it's hard to see that as you haven't indented your code correctly – CodingIntrigue Commented May 22, 2014 at 14:35
• put the complete jQuery function because we dont know who is $(this) – LGVentura Commented May 22, 2014 at 15:11

5 Answers 5

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/

You need to use .parents() instead of .parent(). .parents() traverses up multiple levels of the DOM while .parent() retrieves the immediate parent of the element matching the selector.

$(this).parents('.nav-column').siblings('div.home').toggleClass("off");

Since you're not targetting the direct parent (ul) of the element matching the selector, you'll need to use .parents() instead.

In addition, you have a second problem. According to your code structure div.home is not a sibling of .nav-column. You can use .find() for this instead.

Per your last edit, the previous statement is no longer applicable. The code snippets have been updated to reflect your edited change.

Alternatively, you could do the following to accomplish the same effect:

$(this).parents('.nav-column').next().toggleClass("off");

use .closest() or .parents() instead of .parent(). also div home is not sibling of .nav-column. You need to use .find() instead of .siblings().Try this:

 $(this).closest('.nav-column').find('div.home').toggleClass("off");

or

 $(this).parents('.nav-column').find('div.home').toggleClass("off");

the .parent() only goes up one node, you need to use .parents('select')

If I understand:

$('.nav-column li').forEach(elem, index){
    elem = $(elem);
    if (elem.hasClass('active')){
       elem.addClass("Cheese");
    }
}

This would add the class "Cheese" to any active li :)