Как я могу получить доступ к определенному div на странице с одинаковым идентификатором в двух местах?

Question

Это тот же вопрос, что и этот:

Ссылается на div внутри div с таким же идентификатором, как у другого внутри другого

кроме одной вещи.

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

Я мог бы динамически создавать элемент строки за элементом, но это ОЧЕНЬ сложная строка, и есть только несколько вещей, которые необходимо изменить, так что гораздо проще просто скопировать из шаблона и изменить несколько вещей, которые мне нужны .

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

Или есть еще один более простой способ решения проблемы?

Answer 1

На самом деле нет смысла менять идентификатор на что-то уникальное, даже если ваш документ может быть недействительным.

Механизмы выбора браузеров обрабатывают идентификаторы почти так же, как имена классов. Таким образом, вы можете использовать

document.querySelector('#myCopy #idToLookFor');

чтобы получить копию.

Answer 2

Если вы хотите создать шаблон и использовать его несколько раз, лучше всего сделать его из DOM, например, в documentFragment. Таким образом, он не отвечает на вызовы document.getElementById () в «живом» DOM. Я сделал пример здесь: http://jsfiddle.net/PM5544/MXHRr/

идентификаторы должны быть уникальными на странице.

PM5544 ...

Answer 3

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

var copiedRow = templateRow.innerHTML.replace(/id=/g,"$1copy")

Это позволит скопировать div с префиксом "copy".Вы можете развить это далее для случая, когда у вас есть несколько копий, сохранив счетчик и добавив эту переменную подсчета к вызову replace().

Answer 4

идентификаторы на странице должны быть уникальными, даже если вы клонируете их из шаблона.

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

var clonedElement = template.cloneNode(yes); // make a deep copy
clonedElement.setAttribute("id", "somethingElse"); // change the id
clonedElement.setAttribute("class", 
  clonedElement.getAttribute("class") + " cloned"
);

Чтобы получить доступ ко всем клонированным элементам по имени класса, вы можете использовать метод getElementsByClassName (доступный в новых браузерах) или посмотреть на этот ответ для более глубокого решения: Как получить GetElementByClass вместо GetElementById с Javascript?

В качестве альтернативы, если у вас есть jQuery, вы можете сделать это намного меньше строк кода:

$("#template").clone().attr("id","somethingElse")
  .addClass("cloned").appendTo("#someDiv");

Поиск класса еще проще:

$(".cloned").doSomethingWithTheseElements();

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

Если вам действительно нужно использовать идентификаторы (или уникальные атрибуты «name» в полях формы), я настоятельно рекомендую использовать такую ​​среду, как jQuery или Prototype, для обработки обхода DOM; в противном случае, решить все проблемы с кросс-браузерным бременем довольно сложно. Вот пример некоторых более глубоких изменений в структуре с использованием jQuery:

$("#template").clone().attr("id","somethingElse")
  .addClass("cloned") // add a cloned class to the top element
  .find("#foo").attr("id","bar").end() // find and modify a child element
  .appendTo("#someDiv"); // finally, add the node to the page

Answer 5

Когда вы копируете строку, у вас не заканчивается ссылка на нее?В этот момент вы не можете изменить идентификатор?

Answer 6

Проверьте мой уродливый, но функциональный сыр.Я написал функцию, которая работает как getelementbyid, но вы даете ей начальный узел вместо документа.Работает как шарм.Это может быть неэффективно, но я очень верю в микропроцессоры, использующие движки JavaScript современных браузеров.