jquery .not selector causing error

Question

the code:

 if (!($.browser.msie && $.browser.version.substr(0, 1) == '5')){
        $('ul a span', '#menu'.not('{Developers}')).css('color', 'rgb(210,210,210)').hover(
            function(){ $(this).animate({color: 'rgb(255,255,255)'}, 500); },
            function(){ $(this).animate({color: 'rgb(210,210,210)'}, 200); }
        );
  }

Does this look like correct syntax? It's working, however it's throwing the error that .not is not a function. I'm calling this function in a menu.js that my main page is loading. It's not in a document ready, and it is working, other than the error. If it weren't working, I'd say my core jq library wasn't loading first, but it is. Help is appreciated! Note, :not does not work, so please don't suggest I use that. Thanks!

Answer 1

If you mean to be using the jQuery function .not, you need to call it on a jQuery object (currently you're trying to call it on a string). Here' an example:

$('ul a span', '#menu').not('{Developers}').css
                      ^--- changes here ---^

If you really mean selector as in your title, then it's :not, not .not (reference), and it would need to be part of the selector string. But you said later in your question that you tried :not and it didn't work (I wasn't sure where or how you tried :not, though).

I think there's another problem with that code, because both .not and :not expect a selector (.not also allows an element/jQuery instance or function), and the selector '{Developers}' is invalid.

From your comment that it's working other than the exception, I can only surmise that something else is changing the background on the elements, because the code as quoted will fail (throw an exception, that is barring your having added a not function to String.prototype), and won't enter the $ function at all, much less get to the css part of it.

If your goal is to color the background of the spans matching the selector ul a span under the element with the ID menu but not the span containing the text "{Developers}", you need to use the :contains pseudo-class (taken out of CSS3 but jQuery supports it):

$("#menu ul a span:not(:contains('{Developers}'))").css(...

Live example

If you prefer the form that passes #menu as a context parameter instead:

$("ul a span", "#menu").not(":contains('{Developers}')").css(...

Live example ...but jQuery will handle them both efficiently.

Answer 2

Assuming you pasted the code correctly, you're missing a ')'

jQuery .not() info

if (!($.browser.msie && $.browser.version.substr(0, 1) == '5')){
        $('ul a span', '#menu').not('{Developers}').css('color', 'rgb(210,210,210)').hover(
            function(){ $(this).animate({color: 'rgb(255,255,255)'}, 500); },
            function(){ $(this).animate({color: 'rgb(210,210,210)'}, 200); }
        );
  }

Answer 3

... $('ul a span', '#menu').not( .... Missing a parenthesis I think? Or was it supposed to be part of the selector?

Answer 4

Hi cdb,

I can see a typo in you code.

if (!($.browser.msie && $.browser.version.substr(0, 1) == '5')){
  $('ul a span', '#menu').not('{Developers}').css('color', 'rgb(210,210,210)').hover(
    function(){ $(this).animate({color: 'rgb(255,255,255)'}, 500); },
      function(){ $(this).animate({color: 'rgb(210,210,210)'}, 200); }
    );
}

In your code you have

 $('ul a span', '#menu'.not('{Developers}')).css...

but it should be

$('ul a span', '#menu').not('{Developers}').css...

You are missing one parenthesis and you need one too.