Влияет ли дубликат идентификатора на селекторы jquery?

Question

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

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

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

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

Answer 1

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

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

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

Answer 2

«Примечание: я знаю, что дубликаты идентификаторов не соответствуют стандартам»

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

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

Answer 3

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

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

Answer 4

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

или

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

Answer 5

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

$('[id=myDiv]');

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

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

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

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

Answer 6

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

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

<a name="printButton"....

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

Работал просто денди!

Answer 7

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

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

$ ('# fancy_div [id = InputText]'). Val ();

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

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

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