javascript - 复制 HTML div 的值

Question

我有两个 <div>具有相同结构但具有不同 id 的元素-s 和 name -s。我想将一个 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>

它有效，但不是我想要的那样。输出的源代码如下:

<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 个元素，具体取决于类型。这就是为什么我认为提及所有 child 会有点困难。

Answer 1

这是一个复制 html() 的简单解决方案所有的 children()从一个元素到另一个元素，使用 .each()并使用 index每个元素的:
(太短了，我什至不知道在代码中注释什么!)

// 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());

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

如果您在“当前”和“下一个”元素中始终具有相同的结构，那么它会完美运行。

希望对您有所帮助。