Bug in jQuery :not selector?
<p>Given <a href="http://jsfiddle.net/n8zDu/10/" rel="nofollow">this JS Fiddle</a>, 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).</p>

<p>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?</p>

<p>Edit: Code is as follows:</p>

<p>HTML:</p>

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

<p>jQuery (using 1.7.2):</p>

<pre><code>$(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);    
});​
</code></pre>

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

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

<p>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 :)</p>
