1

Given this JS Fiddle, can anyone see why it is behaving this way? If you look in the console, you will see the element IDs and their tag name listed under either :not method or .not method. Notice how, logically, the statements which select the elements should result in the same elements? Well for some reason :not is only returning 2 elements but .not is returning 11 (the correct number by my reckoning).

Can someone either reassure me that my logic is correct and there is actually a bug here or tell me what I am doing wrong in the first statement?

Edit: Code is as follows:

HTML:

<input id="TITLE" class="reginput" name="TITLE" type="TEXT" size="15" maxlength="15" value="test">
<input id="FIRSTNAME" class="reginput" name="FIRSTNAME" type="TEXT" size="30" maxlength="50" value="test">
<input id="SURNAME" class="reginput" name="SURNAME" type="TEXT" size="30" maxlength="80" value="test">
<input id="EMPNO" class="reginput" name="EMPNO" type="TEXT" size="30" maxlength="50" value="">
<select name="day_DOB" id="day_DOB" class="feday"><option value="0">Day</option></select>
<select name="month_DOB" id="month_DOB" onblur="dodatecheck_data_DOB(this,document.data.day_DOB,document.data.year_DOB,'MONTH');" class="femonth"><option value="0" selected="">Month</option></select>
<select name="year_DOB" id="year_DOB" onblur="dodatecheck_data_DOB(document.data.month_DOB,document.data.day_DOB,this,'YEAR');" class="feyear"><option value="0">Year</option></select>
<input class="reginput" id="HOMEPHONENO" maxlength="50" type="TEXT" name="HOMEPHONENO" size="15" value="">
<input class="reginput" id="WORKPHONENO" maxlength="50" type="TEXT" name="WORKPHONENO" size="15" value="">
<input class="reginput" id="MOBILEPHONENO" maxlength="50" type="TEXT" name="MOBILEPHONENO" size="15" value="">
<input id="JOBTITLE" class="reginput" name="JOBTITLE" type="TEXT" size="30" maxlength="100" value="">
<input id="COMPANYNAME" class="reginput" name="COMPANYNAME" type="TEXT" size="30" maxlength="100" value="">
<select id="CandGeneralField5" name="CandGeneralField5" class="reginput"><option value="0">&lt; Please select &gt;</option><option value="12">Female</option><option value="11">Male</option><option value="13">Prefer not to disclose</option></select>​

jQuery (using 1.7.2):

$(document).ready(function() {
    console.log(":not method");
    $elems = $("input[type=text][id], select[id]:not(select#month_DOB, select#year_DOB), textarea[id], tr input[type=submit][id]");
    $elems.each(function() {
            console.log("\t" + $(this).attr("id") + " - " + this.nodeName.toLowerCase());
    });
    console.log("\tCount: " + $elems.length);    
    console.log(".not method");
    $elems = $("input[type=text][id], select[id], textarea[id], tr input[type=submit][id]")
      .not("select#month_DOB, select#year_DOB");
      $elems.each(function() {
            console.log("\t" + $(this).attr("id") + " - " + this.nodeName.toLowerCase());
      });          
    console.log("\tCount: " + $elems.length);    
});​

Edit: Just to clarify, my logic is that it should select the following in both cases:

  • text inputs which have an id;
  • selects which have an id but not select#month_DOB or select#year_DOB;
  • textareas which have an id;
  • inputs of type submit which have an id and are within a tr.

PS I know the markup is rubbish - it is output by the core code of the produce I work on and there is nothing I can do about it.. theres oh so many things I would change if I could :)

4
  • 6
    Don't give us the whole code like this. Just reduce your problem to a small piece of code and paste it in your question (because if JSFiddle goes down, in one year, no body will see the code).
    – ldiqual
    Jul 3, 2012 at 17:26
  • To validate a bug split your example into smaller pieces of code! Please don't bring up an extended example but only a example piece of code.
    – powtac
    Jul 3, 2012 at 17:29
  • Sorry, it was narrowed down to well under a 10th of what it was originally! It's just dreadful! I've updated the link to a new JSFiddle and added the code above.
    – ClarkeyBoy
    Jul 3, 2012 at 17:32
  • This has now been reported on the jQuery forums at forum.jquery.com/topic/not-selector-not-working-as-expected.
    – ClarkeyBoy
    Jul 3, 2012 at 17:56

3 Answers 3

1

It looks like :not will not take chained selectors, like :not(#id1, #id2). Instead you need to do :not(#id1):not(#id2).

Here's a modified version of your fiddle: http://jsfiddle.net/jackwanders/EM5FP/

As for why it won't work, that may be a question best left to the jQuery devs.

1
1

If you put select[id]:not(select#month_DOB, select#year_DOB) to the first position it works:

$elems = $("span#volumemaindetails")
  .find("select[id]:not(select#month_DOB, select#year_DOB), input[type=text][id], textarea[id], tr input[type=submit][id]");

Also see the updated example. Please don't ask me why :-)

=== UPDATE ===

Maybe the following can explain @jackwanders answer:

From the w3c css3 defintion for negation pseudo-class:

The negation pseudo-class, :not(X), is a functional notation taking a simple selector (excluding the negation pseudo-class itself) as an argument.

A simple selector is defined by:

A simple selector is either a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class.

I would interpret the fact that not a comma is allowed in the selector (group of selectors) or the combination of a type and id selector.

jQuery not() method allows probably more than is allowed by CSS3.
( They will call it a feature ;-) )

2
  • Thanks scessor. I wouldn't have thought the order of selectors would make a difference so hadn't tried it. Seems there may be a couple of 'bugs' here in that case (altho some may refer to them as 'features').
    – ClarkeyBoy
    Jul 3, 2012 at 17:39
  • Thanks for the update. I'd say they should either remove the ',' functionality from the :not selector and update the page to say so, or they should fix it so it works as we would expect (based on the :not documentation). I've been driven mad by this several times now - finally found out what was going on :).
    – ClarkeyBoy
    Jul 3, 2012 at 18:04
1

It looks like a bug in new versions of jQuery.

It works fine in jQuery 1.4.4

Demo

3
  • Ah yes, 1.5.2 it was broken in. Thanks for pointing this out. I've created a post on the jQuery forums with a pointer to this question - hopefully one of their devs will get involved and pick up all the findings from here to locate the issue.
    – ClarkeyBoy
    Jul 3, 2012 at 18:14
  • Congrats for finding a bug :) I always dream of one ;)
    – Jashwant
    Jul 3, 2012 at 18:15
  • 1
    Its only too common with me - I'm not allowed to edit the core code of the product I work on, only customise it with CSS / HTML / jQuery (and ASP to some extent). I'm notorious for finding bugs and really really wind support up on a weekly basis :)
    – ClarkeyBoy
    Jul 3, 2012 at 18:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.