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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (89)

我需要做一个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

提问于
用户回答回答于

[1]要参考您输入的输入,您需要使用$(this)

[2]以获得其价值.val()

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

$(this).next('.b').val($(this).val())而我更喜欢使用input event而不是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 -->

扫码关注云+社区

领取腾讯云代金券