提问者:小点点

如何在其类索引内获取输入的值,并将其分配给自己集合中具有相同索引的另一个输入?


请原谅我的无知,但请你原谅我。假设我们在容器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


共2个答案

匿名用户

您可以使用: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>