Портит ли повторяющийся идентификатор селекторы jquery?

Question

Если бы у меня было два divs, оба с id ="myDiv"

Бы $("#myDiv").fadeOut(); отключить оба дива?Или он исчезнет только в первый / второй раз?Или вообще ничего?

Как мне изменить, какой из них он исчезает?

Примечание: Я знаю, что дублирование идентификаторов противоречит стандартам, но я использую модальное всплывающее окно fancybox, и оно дублирует указанный контент на вашей странице для содержимого всплывающего окна.Если кто-нибудь знает способ обойти это (возможно, я неправильно использую fancybox), пожалуйста, дайте мне знать.

Answer 1

jQuery соответствует ровно одному элементу при запросе идентификатора.Массив, состоящий не более чем из одного Element объект будет возвращен $("#foo").get().Смотрите на Документация по jQuery для получения дополнительной информации или попробуйте это сами.

$(function() {
    alert($("#foo").length);
});

Answer 2

Идентификаторы элементов должны быть уникальными.Наличие нескольких DIVs с одним и тем же идентификатором было бы неправильным и непредсказуемым и противоречит назначению идентификатора.Если бы ты сделал это:

$('.myDiv').fadeOut();

Это привело бы к исчезновению их обоих, предполагая, что вы предоставите им класс myDiv и уникальные идентификаторы (или вообще никаких).

Answer 3

"Примечание:Я знаю, что дублирование идентификаторов противоречит стандартам "

Тогда не делай этого.Вы уже разобрались с двумя проблемами.Это нарушает стандарты и вмешивается в механизм выбора jQuery (и, действительно, в обычный DOM).Вероятно, в будущем возникнет еще больше проблем.

Вполне возможно, вы являются неправильное использование fancybox, и в этом случае я надеюсь, что кто-то, знакомый с ним, поможет вам.Или, что еще хуже, если сам сценарий испорчен, вам не следует его использовать.

Answer 4

Поскольку $('#myDiv') вернет только первый div с этим идентификатором, вам нужно будет найти все элементы с этим идентификатором, используя этот трюк:

$('[id=myDiv]');

Итак, в вашем случае, чтобы применить fadeOut ко всем этим разделениям:

$('[id=myDiv]').fadeOut();

И если вы хотите убедиться, что ваша страница не имеет этого идентификатора дважды, вы можете удалить лишние, выполнив это:

$('[id=myDiv]:gt(0)').remove();

Answer 5

Вы также можете пойти по пути использования find().find вернет все элементы с этим идентификатором, и вы можете ограничить область действия определенным родительским элементом, если необходимо, попробуйте что-то вроде $(document).find('#myDiv').fadeOut();

или

$('.parentElement').find('#myDiv').fadeOut();

Answer 6

Я столкнулся с той же проблемой.По-видимому, когда вы создаете контент на странице, с которой хотите открыть Fancybox, создается зеркальный div исходного контента.В моем случае элементы управления были заключены в div, который создает fancybox с именем "fancy_div".

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

$('#fancy_div [id=входной текст]').val();

ваши элементы управления могут существовать в другом месте Fancybox.лучшее, что можно сделать, это посмотреть на viewsource, но это сложно.

Чтобы перейти к источнику представления, используйте следующий прием:Разместите этот тег в своей форме:Получить значение Откройте свою форму, щелкните по тегу, чтобы открыть окно оповещения.
Убедитесь, что ваш курсор находится в пределах содержимого страницы (найдите элемент управления и щелкните).
Щелкните правой кнопкой мыши на элементе управления и выберите "просмотреть источник".
Существует множество divs, поэтому найдите div, который содержит ваш контент.

Надеюсь, это поможет.

Answer 7

Недавно у меня была похожая проблема.У меня была одна страница, которая отображала другой контент через загрузку Ajax.Существует кнопка, которая запускает сервер для создания PDF-изображения.

Моим первоначальным решением было использовать селектор классов, который работал нормально, но вызвал трения с другим разработчиком.В ссылках уже было так много классов, что использование класса в качестве идентификатора делало код уродливым.Поэтому я использовал атрибут name:

<a name="printButton"....

$('a[name="printButton"]').on('click',function(){....

Сработал просто шикарно!