按元素ID +元素类选择会产生两次相同的元素

Question

为什么jQuery在这里两次返回相同的元素？

经过在HTML无数次,只有一个<div>有id="3"和class="password_field_real".

这是获取所有元素的结果class="password_field_real":

> $(".password_field_real")

[
    <div class="password_field_real" id="2" style="display: none;"></div>, 
    <div class="password_field_real" id="3" style="display: none;"></div>,
    <div class="password_field_real" id="7" style="display: none;"></div>,
]

但是,当我试图获得class="password_field_real"并且id="3",我得到两个div的列表,它们是相同的!

> $("#3.password_field_real")

[
    <div class="password_field_real" id="3" style="display: none;"></div>,  
    <div class="password_field_real" id="3" style="display: none;"></div>
]

其他两个div不是这种情况:

> $("#7.password_field_real")

[
    <div class="password_field_real" id="7" style="display: none;"></div>
]

为什么会这样？

*更新*

在jsFiddle中重现了这一点

*更新#2*

如果使用非数字ID,一切正常.

Answer 1

首先,id页面上必须是唯一的.这就是它背后的想法.

您的问题是您使用无效的ID选择器(根据HTML4):

1. ID和NAME令牌必须以字母([A-Za-z])开头,后面可以跟任意数量的字母,数字([0-9]),连字符(" - "),下划线("_") ,冒号(":")和句号(".").

在其他doctypes中有不同的限制,但你总是至少需要一个字母.由于您只使用数字,因此无效.当你使用非数字身份证的时候,这可能就是一个解释.仍然是jQuery有点奇怪的行为.

在您的ID前面添加至少一个字母[A-Za-z],甚至更好,使其具有描述性.

Answer 2

永远不要使用多次相同的id,id必须是独一无二的

alert( $("#3").length ); // will just return 1 not 8

这个真正愚蠢的代码只是选择你的好,但从​​不使用它,将导致世界末日

alert( $("#3").find("#3").filter(".password_field_real").attr("class") );

如果你需要每个子"div"和"a"的当前id,请尝试数据 - 为什么不是这样的代码

$(".password_entry").each(function(){
    var $t = $(this);
    var currentId = $t.attr("id");
    $t.find("div,a").data("id",currentId);
});

现在你可以用.data("id")从所有子"div"和"a"中提取当前id

例如:

$(".password_field_mask").click(function(){ alert( $(this).data("id") ); });