请原谅我的无知,但请你原谅我。假设我们在容器1中有任意数量的输入,其中一些共享一个类。
我们还有另一个容器2,它内部有一些输入,其中一些还共享一个类
我想要的是将容器1中具有类.inputs1
索引的输入的值复制到容器2中具有类.inputs2
相同索引的相应输入
我知道如何使用var index1=$(this).closest(“input”).index(“.inputs1”);
获取im当前键入的输入(在其类中)的索引
我只是不知道应该使用什么jquery选择器来传输值,应该从哪里开始?
可视化我的概念的代码段:
null
$(document).on("input", "input", function() {
var index1 = $(this).closest("input").index(".inputs1");
var index2 = $(this).closest("input").index(".inputs2");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container1">
<input placeholder="container 1" class="inputs1"><input placeholder="container 1"><input placeholder="container 1" class="inputs1"><input placeholder="container 1"><input placeholder="container 1" class="inputs1">
</div>
<div id="container2">
<input placeholder="container 2" class="inputs2"><input placeholder="container 2"><input placeholder="container 2" class="inputs2"><input placeholder="container 2"><input placeholder="container 2" class="inputs2">
</div>
null
您可以使用:eq
从其他div获取相同的类,然后也在其中添加值。
演示代码:
$(document).on("input", "input", function() {
if ($(this).hasClass("inputs1")) {
var index1 = $(this).index(".inputs1");
//get class with same index
$("#container2").find(".inputs2:eq(" + index1 + ")").val($(this).val())
}
});
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="container1">
<input placeholder="container 1" class="inputs1">
<input placeholder="container 1" class="inputs1">
<input placeholder="container 1" class="inputs1">
<input placeholder="container 1">
<input placeholder="container 1" class="inputs1">
</div>
<br/>
<div id="container2">
<input placeholder="container 2" class="inputs2">
<input placeholder="container 2" class="inputs2">
<input placeholder="container 2" class="inputs2">
<input placeholder="container 2">
<input placeholder="container 2" class="inputs2">
</div>
</body>
</html>
略有不同,也许更容易读懂的方法
null
const $in_1 = $('.inputs1'),
$in_2 = $('.inputs2');
$in_1.on("input", function() {
const inIdx = $in_1.index(this);
$in_2.eq(inIdx).val(this.value);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container1">
<input placeholder="container 1" class="inputs1" />
<input placeholder="container 1" class="inputs1" />
<input placeholder="container 1" class="inputs1" />
<input placeholder="container 1" class="inputs1" />
</div>
<div id="container2">
<input placeholder="container 2" class="inputs2" />
<input placeholder="container 2" class="inputs2" />
<input placeholder="container 2" class="inputs2" />
<input placeholder="container 2" class="inputs2" />
</div>