Блог

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

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

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

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

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

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

 $("#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 не находит соответствия для селектора.

Чтобы исправить это, установите идентификатор перед выходом из него:

 $.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.

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