在整个代码中的特定元素 (jQuery) 之后按类查找下一个元素

Question

我需要做一个jQuery脚本来镜像我在class="a"<input>中键入的内容，对于键盘中按下的每个键，class="b"的下一个正<input>。

但我有一些限制：

• 不，不幸的是我无法更改 HTML。这是一个遗留代码。我唯一能做的就是添加一个jQuery脚本。

• 不，它不能是纯粹的JavaScript代码。它必须是jQuery代码。

• 是的，我需要使用.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是在代码中蚂蚁之后，它将在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

1. 在输入事件中，通过获取父元素的同级元素(阿姨元素)来获取表亲输入
2. 如果阿姨不是<div>继续寻找，直到找到下一个<div>
3. 在阿姨下搜索所需的输入/类组合(即input.b)
4. 将该表亲元素的值设置为正在键入的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>