I can do $(this).children("a").addClass("class") and it works fine, but when I do $(this).addClass("class") it is not working. I am using $(this) within a mouseover function.

$("#site nav li.hasChild").mouseover(function ()
{
    $(this).children("a").addClass("selectedTab");  // works fine
    $(this).addClass("selectedFixTab"); // does not work
    $(this).children("ul").css("display", "block");
});

HTML:

<header id="site">
    <nav>
        <ul>
            <li id="Li1" class="hasChild">
                <a href="#">Fix</a>
                <ul>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                </ul>
            </li>
            <li id="Li2" class="hasChild">
                <a href="#">Learn</a>
                <ul>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                </ul>
            </li>
            <li id="Li3">
                <a href="contact.htm">Contact</a>
            </li>
        </ul>
    </nav>
</header>

CSS:

.selectedFixTab
{
    border-top:1px solid #eb7c00;
    border-left:1px solid #eb7c00;
    border-right:1px solid #eb7c00;
}

.selectedLearnTab
{
    border-top:1px solid #2d70a3;
    border-left:1px solid #2d70a3;
    border-right:1px solid #2d70a3;
}

.selectedTab
{
    border-bottom:1px solid #fff;
}

I can do $(this).children("a").addClass("class") and it works fine, but when I do $(this).addClass("class") it is not working. I am using $(this) within a mouseover function.

$("#site nav li.hasChild").mouseover(function ()
{
    $(this).children("a").addClass("selectedTab");  // works fine
    $(this).addClass("selectedFixTab"); // does not work
    $(this).children("ul").css("display", "block");
});

HTML:

<header id="site">
    <nav>
        <ul>
            <li id="Li1" class="hasChild">
                <a href="#">Fix</a>
                <ul>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                </ul>
            </li>
            <li id="Li2" class="hasChild">
                <a href="#">Learn</a>
                <ul>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                </ul>
            </li>
            <li id="Li3">
                <a href="contact.htm">Contact</a>
            </li>
        </ul>
    </nav>
</header>

CSS:

.selectedFixTab
{
    border-top:1px solid #eb7c00;
    border-left:1px solid #eb7c00;
    border-right:1px solid #eb7c00;
}

.selectedLearnTab
{
    border-top:1px solid #2d70a3;
    border-left:1px solid #2d70a3;
    border-right:1px solid #2d70a3;
}

.selectedTab
{
    border-bottom:1px solid #fff;
}

• javascript
• jquery

• Your code works fine. See it in action here, cut and paste: jsfiddle/gilly3/4Q5mg – gilly3 Commented Sep 2, 2011 at 6:24
• @Dan Clash. What browser you are used for checks? Maybe it does not support multiple CSS classes? – Andrew D. Commented Sep 2, 2011 at 6:27
• Just a general tip -- add console.log($(this)) OR console.log(this.className) , you will know what you are selecting / its class name . – Anil Shanbhag Commented Sep 2, 2011 at 6:27
• 1 @Andrew I seriously doubt that he'd use IE 4 or Netscape Navigator. – JJJ Commented Sep 2, 2011 at 6:32
• I am using IE 9, but need it to work in Firefox and Chrome – Dan Clash Commented Sep 2, 2011 at 18:17

2 Answers 2

It successfully adds the "selectedFixTab" class to the top level LI tags as soon as the mouse hovers over the LI tag. You can see it in action here in this jsFiddle: http://jsfiddle/jfriend00/mj2u6/.

I'm not sure it's doing exactly what you intend, but it is doing what the code says to do. If you care to explain what you're trying to acplish, we can likely help you fix the code to do what you want.

$("#site nav li a").mouseover(function ()
{
    $(this).children("a").addClass("selectedTab");  // works fine
    $(this).addClass("selectedFixTab"); // does not work
    $(this).children("ul").css("display", "block");
});

I think this is what you want it to do!