在整个代码（jQuery）中的特定元素之后按类查找下一个元素
在整个代码（jQuery）中的特定元素之后按类查找下一个元素
提问于 2019-05-27 01:28:18
我需要做一个jQuery脚本来反映我在一个输入<input>的class="a"下一个前进<input>的class="b"，在按下键盘每个键。
但我有一些限制：
- 不，遗憾的是我无法更改HTML。这是遗留代码。我唯一能做的就是添加一个jQuery脚本。
- 不，它不能是纯JavaScript代码。它必须是一个jQuery代码。
- 是的，我需要使用，
.on()因为div包含输入的是dinamically创建的。
我已经尝试使用.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。
Stack Overflow用户
发布于 2019-05-27 11:06:37
[1]要参考您输入的输入，您需要使用$(this)
[2]以获得其价值.val()
[3]选择.b您需要使用的下一个元素.next('.b')
$(this).next('.b').val($(this).val())而我更喜欢使用inputevent而不是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')
Snippet到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 -->页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100009057
复制相关文章
相似问题