1

鉴于这个 JS Fiddle，任何人都可以看到它为什么会这样吗？如果您查看控制台，您将看到元素 ID 及其标签名称列在 :not 方法或 .not 方法下。请注意，从逻辑上讲，选择元素的语句应该如何产生相同的元素？好吧，出于某种原因 :not 只返回 2 个元素，但 .not 返回 11（我认为是正确的数字）。

有人可以向我保证我的逻辑是正确的并且这里实际上有一个错误，或者告诉我我在第一句话中做错了什么？

编辑：代码如下：

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（使用 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);    
});​

编辑：为了澄清，我的逻辑是它应该在这两种情况下选择以下内容：

  • 具有 id 的文本输入；
  • 选择有 id 但没有 select#month_DOB 或 select#year_DOB；
  • 具有 id 的文本区域；
  • submit 类型的输入，具有 id 并且在 tr 内。

PS我知道标记是垃圾 - 它是由我工作的产品的核心代码输出的，对此我无能为力..如果可以的话，我会改变很多事情:)

4

3 回答 3

1

看起来 :not 不会采用链式选择器，例如:not(#id1, #id2). 相反，你需要做:not(#id1):not(#id2).

这是您的小提琴的修改版本：http: //jsfiddle.net/jackwanders/EM5FP/

至于为什么它不起作用，这可能是最好留给 jQuery 开发人员的问题。

于 2012-07-03T17:33:15.693 回答
1

它看起来像新版本的 jQuery 中的一个错误。

它在 jQuery 1.4.4 中运行良好

演示

于 2012-07-03T18:10:26.293 回答
1

如果你把它放在select[id]:not(select#month_DOB, select#year_DOB)第一个位置，它会起作用：

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

另请参阅更新的示例。请不要问我为什么:-)

=== 更新 ===

也许以下可以解释@jackwanders的答案：

来自否定伪类的 w3c css3 定义：

否定伪类: not(X)是一个以简单选择器（不包括否定伪类本身）作为参数的函数表示法。

一个简单的选择器定义为：

简单选择器可以是类型选择器、通用选择器、属性选择器、类选择器、ID 选择器或伪类。

我会解释这样一个事实，即选择器（选择器组）或类型和 id 选择器的组合中不允许使用逗号。

jQuery not()方法所允许的可能比 CSS3 所允许的要多。
（他们将其称为功能；-)）

于 2012-07-03T17:35:42.263 回答