10

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

多次检查HTML，只有一个<div>带有id="3"and 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"and时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，一切正常。

4

2 回答 2

9

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

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

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

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

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

于 2013-03-11T14:39:08.417 回答
7

永远不要多次使用同一个 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") ); });
于 2013-03-05T15:55:23.797 回答