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

发布于 2024-12-20 06:40:52 字数 510 浏览 4 评论 0原文

这是与此相同的问题：

引用一个 div 内的一个 div，其 ID 与另一个内的另一个 div 的 ID 相同，

除了一件事。

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

我可以逐个元素动态创建行，但它是一个非常复杂的行，并且只有几件事需要更改，因此从模板复制并更改我需要的几件事要容易得多。

那么我如何引用副本中的元素而不是模板呢？我不想弄乱模板本身，否则我将永远无法再次使用这些位。

或者有其他更简单的方法来解决问题吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

假情假意假温柔 2024-12-27 06:40:52

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

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

这将使复制的 div 带有“copy”前缀。对于有多个副本的情况，您可以进一步开发此功能，方法是保留一个计数器并将该计数变量添加到 replace() 调用中。

It will probably just be easiest when manipulating the innerHtml to do a replace on the IDs for that row. Maybe something like...

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

This will make the copied divs be prefixed with "copy". You can develop this further for the case that you have multiple copies by keeping a counter and adding that count variable to the replace() call.

回复收藏 0 原文

猫烠⑼条掵仅有一顆心 2024-12-27 06:40:52

当您想要制作一个模板并多次使用它时，最好使用 DOM 制作它，例如在 documentFragment 中。
这样它就不会响应“实时”DOM 中的 document.getElementById() 调用。
我在这里举了一个例子： http://jsfiddle.net/PM5544/MXHRr/

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

PM5544...

回复收藏 0 原文

迷雾森÷林ヴ 2024-12-27 06:40:52

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

浏览器的选择器引擎将 ID 视为与类名几乎相同。因此，您可以用来

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

获取副本。

In reality, there's no use to change the ID to something unique, even though your document may not be valid.

Browsers' selector engines treat IDs pretty much the same as class names. Thus, you may use

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

to get the copy.

回复收藏 0 原文

壹場煙雨 2024-12-27 06:40:52

页面上的 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< /code> 方法（在较新的浏览器中可用）或查看此答案以获得更深入的解决方案：如何使用 Javascript getElementByClass 而不是 GetElementById？

或者，如果您有jQuery 可用，您可以用更少的代码行来完成此操作：

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

类查找甚至更简单：

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

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

如果您确实必须使用 ID（或表单字段中唯一的“名称”属性），我强烈建议使用 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

IDs on a page are supposed to be unique, even when you clone them from a template.

If you dynamically create content on your page, then you must change the id of your newly cloned elements to something else. If you want to access all cloned elements, but not the template, you can add a class to them, so you can refer to all elements with that class:

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

To access all cloned elements by classname, you can use the getElementsByClassName method (available in newer browsers) or look at this answer for a more in-depth solution: How to getElementByClass instead of GetElementById with Javascript?

Alternatively, if you have jQuery available, you can do this is far less lines of code:

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

The class lookup is even simpler:

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

Try to avoid using IDs in the child elements of the cloned structure, as all ids of the cloned element should be changed before adding the clone to the page. Instead, you can refer to the parent element using the new id and traverse the rest of the structure using classnames. Class names do not need to be unique, so you can just leave them as they are.

If you really must use ID's (or unique "name" attributes in form fields), I can strongly suggest using a framework like jQuery or Prototype to handle the DOM traversal; otherwise, it is quite a burden to resolve all the cross-browser issues. Here is an example of some changes deeper in the structure, using 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

回复收藏 0 原文

水水月牙 2024-12-27 06:40:52

看看我的丑陋但实用的奶酪。我编写了一个类似于 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;
  }

Check out my ugly but functional cheese. I wrote a function that works like getelementbyid, but you give it a start node instead of the document. Works like a charm. It may be inefficient but I have great faith in the microprocessors running today's browsers' javascript engines.

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;
  }

回复收藏 0 原文