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>

每次克隆它都会改变聊天，聊天和聊天箱的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

不确定，但如果我是对的，你正在尝试创建一个新的'chatnode'。您将必须遍历您克隆的节点的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);
     }
   }
  }

}

有关工作示例，请参阅this jsfiddle

此外，此代码无效：

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

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

您似乎正在使用jQuery，因此我建议在您的问题中添加“jQuery”标记。也许有些jQuery whizzkid可以提供解决方案。

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

Answer 4

由于您已经在代码中使用了jQuery，所以：

var $obj = $("#chat").clone(),
    $obj1 = obj.find("#ch"),
    $obj2 = obj.find("#chatbox");

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

num = num + 1;

if (num <= 15) {

    $obj.attr('id', $obj.attr('id') + num);
    $obj1.attr('id', $obj1.attr('id') + num);
    $obj2.attr('id', $obj2.attr('id') + num);

    $('body').append(obj);

    var newLeft = offset.left + 275;

    $('#chat').css({
        left: newLeft
    });

}

用js更改内部html id

4 个答案: