为什么我的 jQuery 选择器不适用于带有冒号和句点的 ID？

Question

我有一个脚本，它应该动态地将包含组成员名称的 div 放置在一个容器 div 中。这些 div 由“groupMemberEntryDiv”和组成员的电子邮件地址（在我的系统中是唯一的）的串联来标识。

问题是在 jQuery 选择器中使用 ID 不起作用。我相信我已经涵盖了可能导致此问题的所有可能的挂断：

1. 电子邮件地址中存在“@”（元素 ID 不能包含此字符）。我已通过将它们替换为“：”来解决此问题，这是允许的字符。另外，由于 ':' 没有出现在有效的电子邮件地址中，我可以使用 indexOf 解析字符串并在需要再次使用电子邮件地址时将其替换为 '@'。
2. 存在“:”和“.”在（现在修改的）电子邮件地址（jQuery may see them as pseudo-classes and classes respectively）中。按照该页面中的说明，我尝试转义字符。事实上，我从那个链接中提取了 .replace() 函数来执行此操作。

不幸的是，选择器仍然无法工作。我创建了一个简单的jFiddle 来说明问题。

有人能解释一下发生了什么吗？

Answer 1

这是因为您正在转义特殊字符（这对于选择器来说是正确的），但不需要转义 ID。考虑：

$("#protectedGroupDiv100").append("<div id='groupMemberEntryDiv"  + emailString + "' class='groupMemberEntryDivs'>hey</div>");

生成：

<div id="groupMemberEntryDivblahblah\:gmail\.com" class="groupMemberEntryDivs"></div>

看看这是如何创建一个 id 为：#groupMemberEntryDivblahblah\:gmail\.com 的元素 但后来你使用了#groupMemberEntryDivblahblah\:gmail\.com 的选择器，这看起来是一样的，但jQuery 寻找的实际上是#groupMemberEntryDivblahblah:gmail.com。由于元素的 ID 中包含反斜杠，因此 jQuery 找不到选择器的匹配项。

要解决此问题，请在转义之前设置 ID：

$.each(emailArray, function(index, emailString){
    emailString = emailString.replace("@", ":");            //Element attributes cannot contain "@"

    $("#protectedGroupDiv100").append("<div id='groupMemberEntryDiv"  + emailString + "' class='groupMemberEntryDivs'>hey</div>");

    emailString = emailString.replace(/(:|\.)/g,'\\$1');    //Escape ':' and '.'

   alert($("#groupMemberEntryDiv"  + emailString).length);                  
});

这里是修改后的jsFiddle。

虽然这可行，但我不建议在标记中包含用户电子邮件。正如其他人所暗示的那样，这可能会导致安全问题。