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

Why won't my jQuery selector work for IDs with colons and periods in them?

本文关键字：句点 ID 适用于 获胜 我的 选择器 jQuery 为什么      更新时间：2023-09-26

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

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

  1. 电子邮件地址中存在"@"（元素ID不能包含此字符）。我已经修复了这个问题，将它们替换为"："，这是允许的字符。此外，由于"："未出现在有效的电子邮件地址中，当我需要再次使用电子邮件地址时，我可以使用indexOf来分析字符串并将其替换为"@"
  2. "："answers"."的存在在（现在修改的）电子邮件地址中（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。

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

相关文章：