将div的内容复制/粘贴到另一个div

时间:2014-11-03 17:02:55

标签: javascript jquery html asp.net-mvc

我有一些div容器,里面有很多输入。 我需要将此输入中的数据复制到另一个容器中,如第一个容器。差异 - 新容器对于此输入具有不同的名称和ID,因此我认为简单.clone()不合适。

需要复制并过去刚刚输入的值。

是否还有其他解决方案从每个输入获取值并将其过去到另一个容器中的类似输入吗?

由于

div的例子:

    <div class="listing-space-item-field-row with-label">
        <input id="Spaces_0__SpaceId" name="Spaces[0].SpaceId" value="355637" type="hidden">
        <input class="def-text-input space-name" id="Spaces_0__Name" name="Spaces[0].Name" value="debora" type="text">
        <input class="def-text-input space-size" id="Spaces_0__Size" name="Spaces[0].Size" value="3331" type="text">
        // some other inputs
     </div>

2 个答案:

答案 0 :(得分:1)

通过使用数据属性,您无需从类名属性中解析出公共项。您将不得不遍历元素并隐藏与其对应的元素。

&#13;
&#13;
$("button").on("click", function () {
  
  var c2 = $("#c2");
  $("#c1 :input").each( function() {
        var elem = $(this);
        var dataItem = elem.data("item"); 
        c2.find('[data-item="' + dataItem + '"]').val(elem.val());
  });

});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="c1">
  <select data-item="sel">
      <option>asdf 1</option>
      <option>asdf 2</option>
      <option>asdf 3</option>
  </select>
  <input type="text" value="a" data-item="one" />
  <input type="text" value="b" data-item="two" />
  <input type="text" value="c" data-item="three" />
</div>
<button>copy</button>
<div id="c2">
  <select data-item="sel">
      <option>asdf 1</option>
      <option>asdf 2</option>
      <option>asdf 3</option>
  </select>
  <input type="text" value="" data-item="one" />
  <input type="text" value="" data-item="two" />
  <input type="text" value="" data-item="three" />
</div>
&#13;
&#13;
&#13;

如果这些类得到保证并且顺序相同,则可以避免使用data属性,只需查找相同的类名。

var elem = $(this);
var dataItem = this.className
c2.find('[class="' + dataItem + '"]').val(elem.val());

答案 1 :(得分:0)

如果您要将i1内容复制到i2,请尝试:

<input id="i1" type="text">
<input id="i2" type="text">
<input type="button" onclick="copy()">
<script>
    function copy() {
        document.getElementById("i2").value = document.getElementById("i1").value;
    }
</script>

如果要复制多个输入,可以将其用作基础。