Duplicating IDs JQuery

Question

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

Я использую вкладки jQueryUI, а также пользовательское меню и ajax для загрузки определенных страниц в область содержимого без повторной рендеринга браузера. На некоторых из этих подстраниц пользователь может открыть всплывающее окно (выполненное с помощью диалога jQueryUI) для редактирования информации о клиенте. Поскольку они загружают серверную страницу, в каждом месте, где будет сформирована эта форма, она использует те же идентификаторы.

Я обнаружил, что существует несколько способов закрыть диалоговое окно, не удаляя его из DOM. Это вызывает замешательство позже, когда оно или другая форма открыта в другом месте, и теперь в DOM присутствуют конфликтующие идентификаторы. Я работаю над отслеживанием всех способов закрытия диалога и обеспечения их замены .dailog («destroy»). Remove(), чтобы убедиться, что они удалены из DOM, но я хочу быть уверенным, что решение здесь является доказательством дурака в случае, если кто-то остается на странице.

Мои две непосредственные мысли:

1.) Создание случайной строки для добавления к идентификатору каждого элемента формы, когда форма оказывается, полностью сохраняя уникальность идентификатора.

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

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

Спасибо, Эрик

Answer 1

Вы можете использовать classes, если вам нужно "подобные" объекты. Задача Id состоит в том, чтобы идентифицировать объект уникальным образом.

К слову, классы широко используются, например, в Bootstrap.

UPDATE: Я думаю, что ваш «второй» подход плох, как вы в конечном итоге может изменить расположение, но, таким образом, вы должны отслеживать все изменения, и помните, ГДЕ изменить селекторы (возможно, это будет быть несколькими местами).

Answer 2

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

if($("#"+your_id).length!==0)  
     $("#"+your_id).remove();  
//insert the new element 

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

Answer 3

Вот что вы можете сделать, чтобы различать между различными диалогами, когда вы пытаетесь закрыть их:

1) Изменение каждого диалогового id в class, так что ваши диалоги могут совместно использовать один и тот же class. Использование того же id не рекомендуется.

2) Вы можете создать прослушиватель кликов для кнопки, которая закрывает правильный диалог, используя параметр обратного вызова.См. Рабочий фрагмент ниже.

var closeButtons, i, closeButtonsLen; 
 

 
closeButtons = document.getElementsByClassName('close'); 
 

 
for (i = 0, closeButtonsLen = closeButtons.length; i < closeButtonsLen; i += 1) { 
 
    closeButtons[i].addEventListener('click', function (e) { 
 
     e.target.parentNode.setAttribute('hidden', true); // if you want to hide the dialog 
 
    }); 
 
}

<div class="dialog"><button class="close">first x</button></div> 
 
<div class="dialog"><button class="close">second x</button></div> 
 
<div class="dialog"><button class="close">third x</button></div>

Вы можете заменить e.target.parentNode.setAttribute('hidden', true); с все, что вам нужно сделать. e.target.parentNode получает элемент диалога.