Jquery关注下一个有类的元素 [英] Jquery focus on next element with class

问题描述

我试图创建一个函数，当按下回车键时，会选择下一个带有类的输入。元素在同一行内。但是，如果我需要选择下一行的下一个输入，它将无法继续。

下一行中的第一个.quantity文本框需要集中。

p>

控制台中没有错误。

http://jsfiddle.net/FP6qa/

HTML

 < table> 
< tr> 
< td> 
< input class ='quantity'value =''/> 
< input class ='100'value =''/> 
< / td> 
< td> 
< input class ='quantity'value =''/> 
< input class = '50'value =''/> 
< / td> 
< td> 
< input class ='quantity'value =''/> 
< input class = '20'value =''/> 
< / td> 
< / tr> 
< tr> 
< td> 
< input class ='quantity'value =''/> 
< input class ='100'value =''/> 
< / td> 
< td> 
< input class ='quantity'value =''/> 
< input class = '50'value =''/> 
< / td> 
< td> 
< input class ='quantity'value =''/> 
< input class = '20'value =''/> 
< / td> 
< / tr> 
< / table> 
  

JQuery
< （'keypress'，function（e）{
if（e.keyCode === 13））{
$（$。$ quantity） （this）.parent（）。next（'td'）。find（'input.quantity'）。focus（）;
}
}）;

解决方案

您可以使用 index 方法：

  var $ quan = $（'。quantity'）; 
 $ quan.on（'keyup'，function（e）{
 if（e.which === 13）{
 var ind = $ quan.index（this）; 
 $ quan.eq（ind + 1）.focus（）
} 
}）; 
  

http://jsfiddle.net/cwgZP/

或者，如果您想选择所有输入，您可以尝试：

  var $ input = $（'input [type = text]'）; 
 $ input.on（'keyup'，function（e）{
 if（e.which === 13）{
 var ind = $ input.index（this）; 
 $ input.eq（ind + 1）.focus（）
} 
}）; 
  

I am trying to create a function that when key press Enter occurs the next input with a class is selected.

I have managed to .focus() the next element within the same row. However, if I need to select the next input on the following row it fails to proceed.

The first .quantity textbox in the next row needs to be focused.

There is no error in console.

http://jsfiddle.net/FP6qa/

HTML

<table>
   <tr>
       <td>
         <input class='quantity' value=''/>
         <input class='100' value=''/>
       </td>
       <td>
         <input class='quantity' value=''/>
         <input class='50' value=''/>
       </td>
       <td>
         <input class='quantity' value=''/>
         <input class='20' value=''/>
       </td>
   </tr>
   <tr>
       <td>
         <input class='quantity' value=''/>
         <input class='100' value=''/>
       </td>
       <td>
         <input class='quantity' value=''/>
         <input class='50' value=''/>
       </td>
       <td>
         <input class='quantity' value=''/>
         <input class='20' value=''/>
       </td>
   </tr>
</table>

JQuery

 $(".quantity").on('keypress', function (e) {
        if (e.keyCode === 13) {
           $(this).parent().next('td').find('input.quantity').focus();
        }  
});

解决方案

You can use index method:

var $quan = $('.quantity');
$quan.on('keyup', function(e) {
    if (e.which === 13) {
        var ind = $quan.index(this);
        $quan.eq(ind + 1).focus()
    }
});

http://jsfiddle.net/cwgZP/

Or if you want to select all the inputs you can try:

var $input = $('input[type=text]');
$input.on('keyup', function(e) {
    if (e.which === 13) {
        var ind = $input.index(this);
        $input.eq(ind + 1).focus()
    }
});  

这篇关于Jquery关注下一个有类的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！