Question

这是与此相同的问题：

Referring to a div inside a div with the same ID as another inside another

除了一件事。

有两个具有相同ID的元素的原因是因为我正在向表中添加行，而我正在通过将行的内容作为模板创建一个隐藏的div来实现。我创建一个新div，将模板的innerhtml复制到我的新div，然后我只想编辑它的位，但所有位都与模板具有相同的ID。

我可以按元素动态创建row元素但是它是一个非常复杂的行，并且只需要更改一些东西，所以从模板复制并更改我需要的一些东西要容易得多

那么如何引用我副本中的元素而不是模板呢？我不想弄乱模板本身，或者我永远无法获得第二次使用的位。

还是有另一种更简单的方法可以解决问题吗？

Answer 1

页面上的ID应该是唯一的，即使您从模板中克隆它们也是如此。

如果您在页面上动态创建内容，那么必须将新克隆元素的ID更改为其他内容。如果要访问所有克隆元素而不是模板，可以向它们添加一个类，这样就可以引用该类的所有元素：

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

要按类名访问所有克隆元素，您可以使用getElementsByClassName方法（在较新的浏览器中提供）或查看此答案以获得更深入的解决方案：How to getElementByClass instead of GetElementById with Javascript?

或者，如果你有jQuery可用，你可以做到这一点的代码行少得多：

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

类查找更简单：

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

尽量避免在克隆结构的子元素中使用ID，因为在将克隆添加到页面之前应更改克隆元素的所有ID。相反，您可以使用新id引用父元素，并使用类名遍历结构的其余部分。类名不需要是唯一的，因此您可以保持原样。

如果你真的必须使用ID（或表单字段中唯一的“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 2

在操作innerHtml来替换该行的ID时，这可能是最简单的。也许像是......

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

这将使复制的div以“copy”为前缀。您可以通过保留计数器并将该计数变量添加到replace()调用来进一步开发这种情况。

Answer 3

如果你想制作一个模板，并且最好多次使用它来制作DOM，例如在documentFragment中。这样它就不会响应“live”DOM中的document.getElementById（）调用。我在这里做了一个例子：http://jsfiddle.net/PM5544/MXHRr/

id在页面上应该是唯一的。

... PM5544

Answer 4

实际上，即使您的文档可能无效，也无法将ID更改为唯一的ID。

浏览器的选择器引擎将ID与类名称完全相同。因此，您可以使用

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

获取副本。

Answer 5

看看我丑陋但功能齐全的奶酪。我编写了一个像getelementbyid一样的函数，但是你给它一个起始节点而不是文档。奇迹般有效。它可能效率低下，但我对今天运行的微处理器的浏览器非常有信心。 javascript引擎。

function getelement(node, findid) 
  {
    if (node)
      if (node.id)
        if (node.id == findid)
          return node;
    node = node.firstChild;
    while(node) 
      {
        var r = getelement(node, findid);
        if (r != null)
          return r;
        node = node.nextSibling;
      }
    return null;
  }

Answer 6

当你复制这行时，你最终没有引用它吗？那时你不能改变ID吗？

如何在两个位置访问具有相同ID的页面上的特定div？

6 个答案: