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

问题描述

| 我有一个脚本，该脚本应该将包含组成员名称的div动态放置在一个容器div中。这些div由\“ groupMemberEntryDiv \”和组成员的电子邮件地址（在我的系统中是唯一的）的串联来标识。 问题是在jQuery选择器中使用ID无效。我相信我已经解决了可能导致此问题的所有可能的麻烦： 电子邮件地址中有\'@ \'（元素ID不能包含此字符）。我已通过用\'：\'替换它们来解决此问题，该字符是允许使用的字符。另外，由于\'：\'不会出现在有效的电子邮件地址中，因此当我需要再次使用电子邮件地址时，可以使用indexOf解析字符串并将其替换为\'@ \'。 （现在已修改的）电子邮件地址中存在\'：\'和\'。\'（jQuery可能分别将它们视为伪类和类）。按照该页面中的说明，我尝试对字符进行转义。实际上，我从该链接中取消了.replace（）函数。 不幸的是，选择器仍然无法使用。我创建了一个简单的jfiddle来说明问题。 有人可以解释发生了什么吗？     

解决方法

这是因为您要转义特殊字符（对于选择器而言是正确的），但是不需要转义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。 尽管这可行，但我不建议在标记中包含用户电子邮件。正如其他人暗示的那样，它可能导致安全问题。