Базовое использование селектора JQuery и неуникальный идентификатор элемента

Question

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

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

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

Теперь, похоже, это вызывает проблемы, поскольку идентификаторы не уникальны. Больше. При выборе поля ввода в Firefox 3.6.8 работает следующее:

$('#tabs-2 #scriptName').val( data.name );

Это выбирает вкладку div с идентификатором tabs-2, а затем выбирает вход поле внутри этого div с идентификатором scriptName и устанавливает его значение. Сейчас это не работает в Chrome или Firefox 3.0.19.

Иерархия DOM выглядит примерно так

<div id="tabs">
     <div id="tabs-1">
         ...
         <input id="scriptName"/>
         ...
     </div>
     ...
     <div id="tabs-2">
         ...
         <input id="scriptName"/>
         ...
     </div>
 </div>

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

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

Перед публикацией РЕДАКТИРОВАТЬ

Я нашел много связанных вопросов с ответами, которые давали некоторые подсказки о том, как решить эту проблему, когда я вставил свой вопрос, отредактированный в автономном режиме, но я в любом случае отправляю этот вопрос, поскольку всегда приветствуются хорошие предложения о том, как решить эту проблему. 1023 *

EDIT

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

Answer 1

просто предложение, вы можете сделать идентификатор ввода в качестве класса?Так что у вас нет проблем при клонировании.и ваш код будет выглядеть примерно так: $('#tabs-2 .scriptName').val( data.name );

Answer 2

ID являются уникальными идентификаторами.В тот момент, когда вы вводите дубликат идентификатора, у вас на руках становится недействительный документ.

Лучший способ обойти это - воздержаться от использования идентификаторов для всего, что будет клонировано.Вместо этого используйте «уникальное» имя класса для идентификации элемента.Затем, когда он клонируется, вы можете пройти DOM до каждой копии класса.В jQuery есть очень хорошие методы обхода DOM.

http://api.jquery.com/category/traversing/

Дополнительно: .children(), .parent(), .parents() и .siblings()особенно полезно.Я бы держался подальше от .find(), если это не помогло..find() может быть медленным, если вы просматриваете множество узлов в DOM.Так как вы создаете интерфейс, это может иметь место.

Answer 3

У меня есть приложение AngularJS, где я столкнулся с той же проблемой при повторении элементов ng.Вот как я это решил.

Ваши вкладки, родительский элемент, имеют право уникального идентификатора?Так что просто зайдите дети этой вкладки.Снимите из моих окон div, чтобы получить дочерние элементы для изменяемого размера родителя, а также изменить размер (или вручную изменить размер, как в моем случае) детей.Подсказка: я просто оставил удостоверения личности детям.$ scope.panes [] - это мой массив окон, я просто извлекаю идентификатор и каждый из дочерних элементов:

var objParent = $('#' + $scope.panes[index].windID); //entire div window
var objChild = [];
//objChild[0] = title bar
//objChild[1] = contentpane
objParent.children().each(function(i){
    objChild[i] = $(this);
});

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

child1ID = "id='"+windID+titlebar+"'";
child2ID = "id='"+windID+contentpane+"'";

Answer 4

Не знаю, поможет ли это в вашем случае, но вы можете попробовать метод .find () jQuery.

Попробуйте что-то вроде этого выражения:

$('#tabs-2').find('#scriptName').val( data.name );