Обработка дубликатов тегов с помощью jQuery

#asp.net #jquery

#asp.net #jquery

Вопрос:

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

Мы используем элементы управления отчетами Izenda AdHoc, которые имеют графический интерфейс конструктора запросов. Это дает вам выпадающий список выбора со списком таблиц в нем, и вы можете нажать кнопку и получить еще одну, и еще, и еще и т.д. для построения вашего запроса.

Каждый раз, когда вы нажимаете на новую таблицу, она отправляется обратно на сервер и возвращается с новой строкой в таблице с теми же элементами управления, что и в строке выше, включая идентичный тег select с теми же атрибутами id и name. Как ASP.NET генерирует это выше моих сил.

Но я использовал jQuery для изменения длины выпадающих списков, поскольку они слишком короткие. Как ни странно, несмотря на то, что все они имеют одинаковый идентификатор, используя jQuery, подобный:

 jQuery("#ctl00_ContentPlaceHolder1_queryBuilder_ctl101_jtc_Table").width(250);
  

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

Есть идеи?

РЕДАКТИРОВАТЬ: Теперь, когда я думаю об этом, я понятия не имею, как это вообще работает. Страница загружается обратно, сохраняются источники данных и т.д. Кажется, все работает, но я понятия не имею, как ASP.NET отличает один выпадающий список от другого. Но это действительно работает.

Комментарии:

1. Идентификаторы HTML всегда должны быть уникальными. Вы всегда можете использовать класс для обозначения нескольких связанных элементов, но повторяющиеся идентификаторы вызывают проблемы со сценарием. Конечно, когда вы не контролируете код … это уже другая история. Может быть, вы можете использовать jQuery для присвоения новых уникальных идентификаторов добавленным элементам?

2. Я согласен с вами. Но в этом случае у нас есть явно ошибочный сторонний элемент управления, который мы не можем контролировать.

3. Можете ли вы опубликовать часть разметки для этого? Возможно, вы могли бы выбрать родителей (если только их идентификаторы также не являются уникальными …), а затем перейти к нужным вам дочерним элементам.

Ответ №1:

$("#yourid") будет соответствовать только первому тегу (поскольку, конечно, все ваши идентификаторы должны быть уникальными).

Если у вас не может быть уникальных идентификаторов, то к ним можно получить доступ с помощью атрибута equals selector
$("input[id='yourid']"); . Это вернет все совпадающие элементы.

Посмотрите, как это работает: http://jsfiddle.net/jonathon/22mpK /

Комментарии:

1. потрясающе, спасибо! Я предполагаю, что атрибут equals thing не предназначался для использования с id, поскольку у нас должны быть уникальные идентификаторы, но, похоже, он работает как любой другой атрибут. отлично работает!

Ответ №2:

Вам нужно будет получить к ним доступ через какой-либо другой селектор. поскольку спецификации javascript требуют уникальных идентификаторов, jQuery будет действовать только с первым соответствующим уникальным идентификатором. Если есть класс выше DOM и вы можете последовательно получать доступ к своему элементу по какому-либо пути, связанному с DOM, вы можете решить свою проблему таким образом. например, чтобы каждая таблица отображалась в div класса «whateverClass» и использовала $('.whateverClas table').width(250); мне пришлось бы провести некоторое тестирование, но единственным другим решением, которое я мог придумать, было бы выполнить цикл, $("#ELEM").not(".classed").addClass("classed"); чтобы присвоить каждому дублирующемуся идентификатору выбираемый класс ..?

Ответ №3:

Неудивительно, что jQuery корректирует только один из выбранных вами тегов.

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

вам следует попробовать выбирать таблицы по именам их элементов и положению на странице.

 for instance let's imagine your tables are inside the 3rd div in the page :
jQuery('div:eq(2)>table').width(250);
  

вам следует взглянуть на все структурные селекторы, доступные на api.jquery.com и создайте структурный селектор без использования идентификатора.

Я надеюсь, что это поможет вам

Джером Вагнер