Question

我需要执行一个jQuery脚本，以将我在<input>的{{1}}中键入的内容镜像到class="a"的下一个前向<input>上，以按键盘。

但是我有一些限制：

否，很遗憾，我无法更改HTML。这是一个遗留代码。我唯一能做的就是添加一个jQuery脚本。
否，它不能是纯JavaScript代码。它必须是jQuery代码。
是，我需要使用class="b"，因为包含输入的.on()是动态创建的。

我尝试使用div，.next()，.find()，.each() ...，但是我是初学者，所以我不知道如何使用它们正确地。可能是使用这些功能的东西。

.closest()

<!-- any code -->
<div>
    <input type="text" class="a" />
</div>
<!-- any code -->
<div>
    <input type="text" class="b" />
</div>
<!-- any code -->
<div>
    <input type="text" class="a" />
</div>
<!-- any code -->
<div>
    <input type="text" class="b" />
</div>
<!-- any code -->
<div>
    <input type="text" class="a" />
</div>
<!-- any code -->
<div>
    <input type="text" class="b" />
</div>
<!-- any code -->

重要提示：请注意，代码并不完全像这样。在一个$(document).on('keyup', '.a', function (ev) { //1 - get value in input and store in a variable //2 - search for the next forward input of class="b" //3 - set the variable to the value of input });和另一个input之间，有一些代码，并且它们不在同一父div中发生。我唯一不能保证的是，下一个input会在代码中位于ant之后，它将位于div内。

Answer 1

^[1]要引用您输入的内容，您需要使用$(this)

^[2]要获得其价值，请使用.val()

^[3]要选择下一个.b元素，您需要使用.next('.b')

$(this).next('.b').val($(this).val())，我更喜欢使用input 事件，而不是keyup

$(document).on('input', '.a', function (ev) {
    //1 - get value in input and store in a variable
    var GetThisValue = $(this).val();
    //2 - search for the next forward input of class="b"
    //3 - set the variable to the value of input
    $(this).next('.b').val(GetThisValue);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <input type="text" class="a" />
    <input type="text" class="b" />
</div>
<div>
    <input type="text" class="a" />
    <input type="text" class="b" />
</div>
<div>
    <input type="text" class="a" />
    <input type="text" class="b" />
</div>

^{[其他选择器来选择.b]}

$(this).parent().find('.b')
$(this).closest('div').find('.b')

^{摘录以进行OP更新}

$(document).on('input', '.a', function (ev) {
    //1 - get value in input and store in a variable
    var GetThisValue = $(this).val();
    //2 - search for the next forward input of class="b"
    //3 - set the variable to the value of input
    $(this).parent().nextAll('div:has(.b):first').find('.b').val(GetThisValue);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <input type="text" class="a" />
</div>
<div> any code </div>
<div>
    <input type="text" class="b" />
</div>
<!-- any code -->
<div>
    <input type="text" class="a" />
</div>
<div> any code </div>
<div>
    <input type="text" class="b" />
</div>
<div> any code </div>
<div>
    <input type="text" class="a" />
</div>
<!-- any code -->
<div>
    <input type="text" class="b" />
</div>
<!-- any code -->

Answer 2

看到jQuery 是纯JavaScript的人，可能会争辩说这也是“ jQuery代码”：D

在 input 事件上，通过获取父元素的同级（姨妈元素）来获取表亲输入
如果姑姑不是<div>，请继续搜索，直到找到下一个<div>
在姨妈下搜索所需的输入/类组合（即input.b）

cousin

设置为所键入的input.a的值

document.addEventListener('input', event => {
  if (event.target.classList.contains('a')) {
    let aunt=event.target.parentElement.nextElementSibling
    while(aunt && aunt.nodeName!='DIV'){
      aunt=aunt.nextElementSibling;
    }
    const cousin = aunt.querySelector('input.b');
    cousin.value = event.target.value;
  }
});

<!-- any code -->
<div>
  <input type="text" class="a" />
</div>
<pre>
  code
</pre>
<div>
  <input type="text" class="b" />
</div>
<pre>
  code
</pre>
<div>
  <input type="text" class="a" />
</div>
<!-- any code -->
<div>
  <input type="text" class="b" />
</div>
<!-- any code -->
<div>
  <input type="text" class="a" />
</div>
<pre>
  code
</pre>
<div>
  <input type="text" class="b" />
</div>

在整个代码（jQuery）中特定元素之后按类查找下一个元素

2 个答案: