用js更改内部html id。

Question

如何使用js更改内部id，并将其保持相同的id num (例如hey1、bob2)

我的js代码

var obj = document.getElementById("chat").cloneNode(true);
var obj1 = document.getElementById("ch");
var obj2 = document.getElementById("chatbox");

var p = $(".chat");
var offset = p.offset();

num = num + 1;        

if (num <=15) {

obj.id = obj.id + num;  <--- **changing the id (this one works fine but the other two dont**
obj1.id = obj1.id + num;   <--- changing the id
obj2.id = obj2.id + num;      <--- changing the id

document.body.appendChild(obj);
document.body.appendChild(obj1);
document.body.appendChild(obj2);

var left = offset.left + 275;

document.getElementById("chat").style.left = left + "px";

告诉我我是不是做错了，但这是我想的最简单的方法。

(ps我是javascript的初学者)

感谢那些试图帮助你的人.

编辑

好吧，我克隆这个

<div class="chat" id="chat">
<div id="ch" class="ch">
               <h2>Chat</h2></div>
               <div class="chatbox" id="chatbox">
               <div class="messages"></div>
               <textarea id="message" class="chatinp" 
               rows="3" cols="27"></textarea>
               <button class="send">Send</button></div>
</div>

每次克隆时，它都会更改聊天、ch和chatbox的id，但是保持原版不变。

像这样..。

clone1

<div class="chat" id="chat1">
<div id="ch1" class="ch">
               <h2>Chat</h2></div>
               <div class="chatbox" id="chatbox1">
               <div class="messages"></div>
               <textarea id="message" class="chatinp" 
               rows="3" cols="27"></textarea>
               <button class="send">Send</button></div>
</div>

Clone2

<div class="chat" id="chat2">
<div id="ch2" class="ch">
               <h2>Chat</h2></div>
               <div class="chatbox" id="chatbox2">
               <div class="messages"></div>
               <textarea id="message" class="chatinp" 
               rows="3" cols="27"></textarea>
               <button class="send">Send</button></div>
</div>

Answer 1

不确定，但如果我是对的，你正在尝试创建一个新的“聊天节点”。您必须遍历您克隆的节点的childNodes数组以更改id。

function cloneChat(){
  var obj  = document.getElementById("chat").cloneNode(true),
      children = obj.childNodes
  ;
  num += 1;
  obj.id = obj.id+num;
  if (num<16){
      changeId(children,num);
  }
  //now appending obj to the document.body should be sufficient
  document.body.appendChild(obj);

  //change id recursively  
  function changeId(nodes, n){
   for (var i=0;i<nodes.length;i=i+1){
     if (nodes[i].childNodes){
           changeId(nodes[i].childNodes,n);
     }
     if(nodes[i].id && /^ch$|^chatbox$/i.test(nodes[i].id)) {
      nodes[i].id += String(n);
     }
   }
  }

}

有关工作示例，请参见这弹琴。

此外，此代码将无法工作：

var p = $(".chat");
var offset = p.offset();

因为$(".chat")返回一个节点列表，其中每个节点都有自己的偏移量。

您似乎在使用jQuery，所以我建议在您的问题中添加一个'jQuery‘标签。也许一些jQuery神童会提供一个解决方案。

Answer 2

在jQuery中尝试使用

element.attr("id","newId");

请参阅：http://api.jquery.com/attr/

Answer 3

这个功能怎么样？

    function appendMe() {
        var elementsToClone = ["chat"];                       //Parent Elements to clone. This is the class name as well as the id
        var childrenToHandle = new Array();
        childrenToHandle["chat"] = ["ch"];          //Child elements mapping to keep sync. This is the class name as well as the id. Here we say that for the parent element chat, the inner elements to keep in sync is ch
        var itemCount = 0;
        for(i = 0; i < elementsToClone.length; i++) {
            var refObj = document.getElementById(elementsToClone[i]);
            if(refObj) {
                $("." + elementsToClone[i]).each(
                    function() {
                        if(this.id.match(/\d+$/g)) {
                            itemCount = this.id.match(/\d+$/g);
                        }
                    }
                );
                var newObj = refObj.cloneNode(true);
                newObj.id = elementsToClone[i] + ++itemCount;
                var childrenArray = childrenToHandle[elementsToClone[i]];
                if(childrenArray) {
                    $(childrenArray).each(
                        function() {
                            $(newObj).find("." + this).attr("id", this + itemCount);
                        }
                    );
                }
                document.body.appendChild(newObj);
            }
        }
    }