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">< Please select ></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 :)