Почему мой селектор jQuery не работает для идентификаторов с двоеточиями и точками в них? - PullRequest
Новая
       12

Почему мой селектор jQuery не работает для идентификаторов с двоеточиями и точками в них?

1 голос
/ 26 мая 2011

У меня есть скрипт, который должен динамически помещать элементы div, содержащие имена членов группы, в один контейнер div.Эти div идентифицируются путем объединения «groupMemberEntryDiv» и адреса электронной почты члена группы (который уникален в моей системе).

Проблема заключается в том, что использование идентификаторов в селекторах jQuery не работает,Я полагаю, что рассмотрел все возможные проблемы, которые могут быть причиной этой проблемы:

  1. Наличие '@' в адресах электронной почты (идентификаторы элементов не могут содержать этот символ).Я исправил это, заменив их символом «:», что является допустимым символом.Кроме того, поскольку ':' не отображается в действительных адресах электронной почты, я могу использовать indexOf для анализа строки и заменить ее на '@', когда мне нужно снова использовать адрес электронной почты.
  2. наличие ':' и '.'в (теперь измененных) адресах электронной почты ( jQuery может видеть их как псевдоклассы и классы соответственно ).Следуя инструкциям на этой странице, я попытался убежать от персонажей.Фактически, я поднял функцию .replace () из этой самой ссылки, чтобы сделать это.

К сожалению, селекторы все еще не будут работать.Я создал простой jFiddle для иллюстрации проблемы.

Может кто-нибудь объяснить, что происходит?

1 Ответ

3 голосов
/ 26 мая 2011

Это потому, что вы экранируете специальные символы (что правильно для селектора), но идентификатор не нужно экранировать. Рассмотрим: 

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

Формирует: 

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

Посмотрите, как это создает элемент с идентификатором: #groupMemberEntryDivblahblah\:gmail\.com но позже вы используете селектор #groupMemberEntryDivblahblah\:gmail\.com, который выглядит так же, но jQuery ищет на самом деле #groupMemberEntryDivblahblah:gmail.com. Поскольку идентификатор вашего элемента содержит обратную косую черту, 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 .

Хотя это работает, я не рекомендую иметь электронные письма пользователей в разметке. Как намекнули другие, это может привести к проблемам с безопасностью.

...