Копировать/Вставить содержимое div в другой div

Question

У меня есть div-контейнер с множеством входов. Мне нужно скопировать данные с этих входов в другой контейнер, как первый. Разница - новый контейнер имеет разные имена и идентификаторы для этих входов, поэтому простой .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> 

Answer 1

Используя атрибут data, вам не нужно разбирать общий элемент из атрибута имени класса. Вам придется пройти через элементы и скрыть тот, который ему соответствует.

$("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()); 
 
    }); 
 

 
});

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

Если классы гарантированы и в том же точном порядке, вы можете избежать атрибута данных и просто посмотреть на то же имя класса.

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

Answer 2

Если вы хотите скопировать 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> 

Вы можете использовать это в качестве основы, если вы хотите скопируйте несколько входов.