时间戳

首页 > 解决方案 > 复制 HTML div 的值

javascript - 复制 HTML div 的值

问题描述

我有两个<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>

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

标签： javascriptjqueryhtml

解决方案

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>

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

希望能帮助到你。

推荐阅读