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

【问题标题】：Selecting by element ID + element class yields same element twice按元素 ID + 元素类选择两次会产生相同的元素
【发布时间】：2013-02-17 14:45:04
【问题描述】：

为什么 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>
]

为什么会发生这种情况？

* 更新 *

ReproducedjsFiddle 中的这个

* 更新 #2 *

如果使用非数字 ID，则为 works just fine。

【问题讨论】：

您使用的是什么版本的 jQuery？你能想出一个 jsFiddle 或类似的东西来证明这个问题吗？我无法用 jQuery 1.9.1 (jsfiddle.net/B7S2f) 重现这一点。
你知道数字 ID 只在 HTML5 中是合法的吗？
我认为应该没有问题，如果您遇到问题，请先清除cache and cookies然后再检查。
@DreamEater：我回滚了你的编辑，因为你破坏了帖子中的控制台格式。
id 用于唯一元素，这里使用 8 个元素，id 为“3” ...

标签： jquery html jquery-selectors

【解决方案1】：

首先，id 在页面上必须是唯一的。这就是它背后的想法。

您的问题是您使用了无效的 ID 选择器（根据HTML4）：

ID 和 NAME 标记必须以字母 ([A-Za-z]) 开头，并且可以是后跟任意数量的字母、数字 ([0-9])、连字符 ("-")、下划线 ("_")、冒号 (":") 和句点 (".")。

在其他文档类型中存在不同的限制，但您始终需要至少一个字母。由于您只使用数字，因此它是无效的。当您使用非数字 ID 一切正常时，这可能就是解释。 jQuery 的行为还是有点奇怪。

在您的 ID 前面至少加上一个字母 [A-Za-z]，或者更好的是，使其具有描述性。

【讨论】：

【解决方案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，请尝试 data- 为什么不使用这样的代码

$(".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") ); });

【讨论】：