CODEWITHSUNDEEP
javascriptjqueryhtmljquery-selectors
artparks
artparks

Reputation: 761

:not() in various guises isn't working

I'm making a simple jQuery navigation system but I am far from expert at it, as the following code may demonsytrate..

HTML:

  <ul id="main-nav"> 
        <li><a href="../" id="home">HOME</a></li> 
        <li class="pipe">|</li> 
        <li id="about">ABOUT US</li> 
        <li class="pipe">|</li> 
        <li id="projects">PROJECT TYPES</li> 
        <li class="pipe">|</li>             
        <li id="reducing">REDUCING EMISSIONS</li> 
        <li class="pipe">|</li> 
        <li id="carbon">CARBON MARKETS</li> 
        <li class="pipe">|</li> 
        <li id="FAQs">FAQs</li> 
    </ul>

jQuery:

 $(function () {
        $("#main-nav li:not('.pipe')").hover(function () {
            var $this = $(this).attr("id");
            $('#nav-strip2 ul.sub-nav').hide();
            $("#nav-" + $this).show();
        });
    });

The showing/hiding works just fine, the only issue is when the pipe is hovered over it hides everything. There's a reason the menu needs to be made up in <li>s and can't just be <a>s but it's not really relevant and long.

I'm trying here to exclude the .hover() stuff from happening when it's a li with .pipe class but there's no joy. What am I doing wrong? Any help appreciated. I'm sure there's a way of excluding <li>s with no ID attached, which would save assigning the .pipe class to all those <li>s. Alas I have not the jQuery ability to figure this out yet!

Thanks.

Upvotes: 2

Views: 88

Answers (2)

Naftali
Naftali

Reputation: 146310

try this:

$(function () {
    $("#main-nav li").not('.pipe').mouseenter(function () {
        $('#nav-strip2 ul.sub-nav').hide();
        $("#nav-" + this.id).show();
    });
});

Upvotes: 1

BoltClock
BoltClock

Reputation: 723729

When using :not() as a selector, don't use quotes within its brackets:

$("#main-nav li:not(.pipe)")

Upvotes: 6

Related Questions