如何将 div 中的输入值复制到具有相同索引的另一个 div 中的输入？ [复制]答案

【问题标题】：how to copy the value of an input within a div to an input in another div with the same index? [duplicate]如何将 div 中的输入值复制到具有相同索引的另一个 div 中的输入？ [复制]
【发布时间】：2023-04-05 03:17:01
【问题描述】：

假设我们在#container1 中有一些任意数量的输入，在#container2 中有一些任意数量的输入，我们希望将 container1 处索引为 1 的输入值复制到 container2 处索引1 的输入，然后将 input2 复制到 input2等等。

我知道我们可以只使用 jquery $("#container2 input:eq(0)").val($("#container1 input:eq(0)").val()) 并且每个容器都一样，但是如果每个容器中有 1000 个输入呢？

自动生成这个的简单方法是什么（jquery 或 vanilla）？

演示代码来可视化我的概念（我们可以修改函数replicateInputValues）：

function replicateInputValues(){
$("#container2 input:eq(0)").val($("#container1 input:eq(0)").val())
$("#container2 input:eq(1)").val($("#container1 input:eq(1)").val())
$("#container2 input:eq(2)").val($("#container1 input:eq(2)").val())
};

$(document).on('click', 'button', function () {
replicateInputValues();
});

button{
margin-bottom:4px;
}

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<button>COPY INPUT VALUES</button>

<div id="container1"><input placeholder="container 1"><input placeholder="container 1"><input placeholder="container 1"></div>

<div id="container2"><input placeholder="container 2"><input placeholder="container 2"><input placeholder="container 2"></div>
</body>
</html>

【问题讨论】：

标签： javascript html jquery

【解决方案1】：

首先从两个输入中收集。然后使用.each，使用index参数访问其他集合中对应的输入来设置值：

const inputs1 = $('#container1 input');
const inputs2 = $('#container2 input');
function replicateInputValues() {
  inputs1.each((i, input) => {
    inputs2[i].value = input.value;
  });
};

$('button').on('click', replicateInputValues);

button {
  margin-bottom: 4px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>COPY INPUT VALUES</button>

<div id="container1"><input placeholder="container 1"><input placeholder="container 1"><input placeholder="container 1"></div>

<div id="container2"><input placeholder="container 2"><input placeholder="container 2"><input placeholder="container 2"></div>

【讨论】：