js克隆id对象后如何修改id下子元素的id值

qq_28513445 2015-05-26 11:36:11

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>

<body>

<div id="lbys">
<div class="shurukuang" id="tps_0">图片1地址：
<input type="text" id="img0_ad">
图片1链接：
<input type="text" id="img0_li">
</div>

</div>
<button name="tianjia" style="width:100px;" id="tj" onclick="tjs()" >添加一个图片</button>
<button name="tianjia" style="width:100px;" id="tj" onclick="scs()" >删除一张图片</button>
<button name="ddd" onclick="as()" style="width:100px;">生成代码</button><br/>

<script>
var zhs=0;

var $=function(cs){
return document.getElementById(cs)
};

function tjs(){

var sourceNode = $("tps_"+zhs);
var clonedNode = sourceNode.cloneNode(true); // 克隆节点
zhs=zhs+1;
var vbn="tps_" + zhs
clonedNode.setAttribute("id",vbn );

sourceNode.parentNode.appendChild(clonedNode); // 在父节点插入克隆的节点

}
</script>
</body>
</html>
上面是我写的只更改父id的代码，不会写也能修改子元素id值代码，可能我表达不清楚，看下面的代码，就是要做到下面哪种
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>

<body>

<div id="lbys">
<div class="shurukuang" id="tps_0">图片1地址：
<input type="text" id="img0_ad">
图片1链接：
<input type="text" id="img0_li">
</div>

</div>
<div class="shurukuang" id="tps_1">图片2地址：
<input type="text" id="img1_ad">
图片2链接：
<input type="text" id="img1_li">
</div>
<div class="shurukuang" id="tps_2">图片3地址：
<input type="text" id="img2_ad">
图片3链接：
<input type="text" id="img2_li">
</div>

</div>
</div>
<button name="tianjia" style="width:100px;" id="tj" onclick="tjs()" >添加一个图片</button>
<button name="tianjia" style="width:100px;" id="tj" onclick="scs()" >删除一张图片</button>
<button name="ddd" onclick="as()" style="width:100px;">生成代码</button><br/>


</body>
</html>

...全文

498 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

xuzuning 2015-05-27

打赏
举报

我并没有理解错你的意思因为你并没有修改 input id 的代码

qq_28513445 2015-05-27

打赏
举报

3q2楼我摘我的代码是忘了摘as（）的容器您可能没理解我的意思

xuzuning 2015-05-27

打赏
举报

补写 as 函数

function as() {

  alert($('lbys').innerHTML);

}

运行后并未发现不对的地方

div 的 id 是按期望递增的

qq_28513445 2015-05-27

打赏
举报

额 3q 我只学过 as2现在刚要学js 所以会不了解js 感谢大神的回复我也想出了一个笨方法修改html内容不过没有大神的代码有智慧 function tjs(){ var sourceNode = $("tps_"+zhs); var clonedNode = sourceNode.cloneNode(true); // 克隆节点 zhs=zhs+1; var vbn="tps_" + zhs clonedNode.setAttribute("id",vbn ); sourceNode.parentNode.appendChild(clonedNode); // 在父节点插入克隆的节点 $(vbn).innerHTML="图片"+zhs+"地址：<input type=text id=img"+zhs+"_ad>"+"图片"+zhs+"链接：<input type=text id=img"+zhs+"_li>" }

xuzuning 2015-05-27

打赏
举报

不会写？那你说清楚呀
其实你是会写的

function tjs(){

  var sourceNode = $("tps_"+zhs);

  var clonedNode = sourceNode.cloneNode(true); // 克隆节点 

  zhs=zhs+1;

  var vbn="tps_" + zhs

  clonedNode.setAttribute("id",vbn );



  var o = clonedNode.childNodes;

  for(i=0; i<o.length; i++) {

    if(o[i].nodeName == 'INPUT') {

      o[i].setAttribute("id", o[i].getAttribute("id").replace(/\d+/, zhs) );

    }

  }



  sourceNode.parentNode.appendChild(clonedNode); // 在父节点插入克隆的节点 

}