Question

我有两个<div>元素具有相同的结构，但具有不同的id - s和name - s。我想将一个div的值复制到另一个div中，保留属性并仅复制value属性。

我尝试了以下方式：

$('#current-1').html($('#next-1').html());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="current-1">
  <div id="current[1]_div1">Some text for current - div1</div>
  <div id="current[1]_someelement2">Some text for current - someelement2</div>
</div>
<div id="next-1">
  <div id="next[1]_div1">Some text for next</div>
  <div id="next[1]_someelement2">Some text for next - someelement2</div>
</div>

它有效，但不是我想要的。 ouput的来源如下：

<div id="current-1">
 <div id="next[1]_div1">Some text for next</div>
 <div id="next[1]_someelement2">Some text for next - someelement2</div>
</div>
<div id="next-1">
 <div id="next[1]_div1">Some text for next</div>
 <div id="next[1]_someelement2">Some text for next - someelement2</div>
</div>

但是，首选方式是：

<div id="current-1">
 <div id="current[1]_div1">Some text for next</div>
 <div id="current[1]_someelement2">Some text for next - someelement2</div>
</div>
<div id="next-1">
 <div id="next[1]_div1">Some text for next</div>
 <div id="next[1]_someelement2">Some text for next - someelement2</div>
</div>

有可能以某种方式实现这一目标吗？问题是current以及next可以包含10,15或20个元素，具体取决于类型。这就是为什么我认为引用所有孩子会有点困难。

Answer 1

这是一个简单的解决方案，使用html()并使用每个元素的children()将所有.each()的元素从index复制到另一个元素：
（这很短暂，我甚至不知道在代码中发表什么评论！）

＆＃13;

// Copy each of the childs of next in the childs of current
$('#current-1').children().each(function(index) {
  var next = $('#next-1').children()[index];
  $(this).html($(next).html());
});

// Output in console to see ids
console.log($('#current-1').html());

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="current-1">
  <div id="current[1]_div1">Some text for current - div1</div>
  <label>Label for current</label>
  <div id="current[1]_someelement2">Some text for current - someelement2</div>
</div>
<div id="next-1">
  <div id="next[1]_div1">Some text for next</div>
  <label>Label for next</label>
  <div id="next[1]_someelement2">Some text for next - someelement2</div>
</div>

＆＃13;

如果您在＆＃34;当前＆＃34;中始终具有相同的结构，那么它将非常有效。和＆＃34; next＆＃34;元件。

希望它有所帮助。

Answer 2

为要递归复制的div提供一个类，以便以后可以使用DOM遍历顺序选择它们，然后使用element.cloneNode(true)

输入：

<div class ="recursive" id="current-1">
  <div id="current[1]_div1">Some text for current</div>
</div>
<div class ="recursive" id="next-1">
  <div id="next[1]_div1">Some text for next</div>
</div>

这是一个将div复制到目标div的函数：

function rCopy(container){
    var toBeCopied = Array.prototype.slice.call(document.getElementsByClassName("recursive"));
    return toBeCopied.reduce(function(ac,d,i,a){ac.appendChild(d.cloneNode(true));return ac;},container)
}

container是要将元素复制到的div。请注意不要将此容器附加到同一文档中，因为重复的ID会产生问题

用法：

rCopy(document.getElementById("someContainer"))

FIDDLE：

https://jsfiddle.net/ibowankenobi/LygpLcko/

如果要以递归的方式复制当前div的text节点及其nextElementSibling的文本节点（包括父节点子节点文本节点，如果有的话），则使用递归函数并与{ {1}}以防止吹栈。我从上到下（上一个兄弟从下一个获取其内容），你可以任何方向并在完成后附加一个回调。这是一个例子：

INPUT：

requestAnimationFrame

这里最后一个id为next-2且带有类递归的div不会被触及，因为它没有类似的兄弟。功能：

<div class ="recursive" id="current-1">
  <div id="current[1]_div1">Some text for current</div>
  <div id="current[1]_div2">Some text-2 for current
      <div id="current[1]_div3"> Some inner current <br>
          <span>inner inner content current</span>
      </div>
  </div>
</div>
<div class ="recursive" id="next-1">
  <div id="next[1]_div1">Some text for next-1</div>
  <div id="next[1]_div2">Some text-2 for next-1
      <div id="next[1]_div3"> Some inner next-1 <br>
          <span>inner inner content next-1</span>
      </div>
  </div>
</div>
<div class ="recursive" id="next-2">
  <div id="next[2]_div1">Some text for next-2</div>
  <div id="next[2]_div2">Some text-2 for next-2
      <div id="next[2]_div3"> Some inner next-2 <br>
          <span>inner inner content next-2</span>
      </div>
  </div>
</div>

用法：

function rCopy(current,target){
    var sNodes = current.childNodes;
    var tNodes = target.childNodes;
    for (
        var i =0,s=sNodes[i],t=tNodes[i];
        i<sNodes.length;
        ++i,s=sNodes[i],t=tNodes[i]
    ) {
         if (s && t && s.nodeType === 3 && t.nodeType === 3) {
              s.nodeValue = t.nodeValue;
              continue;
         } else if (s && t) {
              !function(current,target){
                  window.requestAnimationFrame(
                      function(){rCopy(current,target)}
                  )
              }(s,t)
         }
    }
  target.nextElementSibling && target.nextElementSibling.className === "recursive" && window.requestAnimationFrame(function(){rCopy(target,target.nextElementSibling)})
}

一旦被requestAnimationFrame调用，该链将继续，直到找不到下一个元素兄弟。

FIDDLE：

https://jsfiddle.net/ibowankenobi/LygpLcko/2/

复制HTML div的值

2 个答案: