如何使用jquery查找下一个元素？

在我给出的例子中，我有两个文本框。当第一个文本框中的值发生改变时，我想查找紧接着的下一个文本框（注意：无ID）并更改其值。如何使用jquery查找下一个元素？

给出的示例仅包含单个文本框组。实际上它可以是多个文本框。（从&组到财务数据的文本框）

所以，当从文本框（txtFinancialYearFrom）中的值改变时，我想要找到到文本框（txtFinancialYearTo）并更改其值。

在此先感谢您的帮助！

<table class="fotm-table">      

        <tr> 
         <td class="text-right" width="120"> 
          <span id="ContentPlaceHolder1_lblFinancialYear">Financial Data :</span> 
         </td> 
         <td> 
          <span> 
           <input type="text" id="txtFinancialYearFrom" 
           name="ctl00$ContentPlaceHolder1$txtFinancialYearFrom"> 
          </span> 
         </td> 
         <td width="20" align="center"> 
          <span style="align-content: center">to</span> 
         </td> 
         <td> 
          <span> 
           <input type="text" id="txtFinancialYearTo" 
           name="ctl00$ContentPlaceHolder1$txtFinancialYearTo"> 
          </span> 
         </td> 
        </tr>       
       </table>

来源

2015-07-03 PrinceT

鉴于其他输入有一个'id'，你可以不直接选择它，而不需要遍历DOM，'$（'＃txtFinancialYearTo''）'？ –

如果它是一个组，那么ID应该是唯一的。 –

你试过谷歌吗？ https://api.jquery.com/next/实际上是第一个链接，如果你谷歌“jquery下一个元素”，你可能会想要像$（“输入”）。。下一个（ '输入'）VAL（$（本）.VAL（）+ 1）;}）; –

使用给定的信息，因为你将有更多的块（你的桌子上，应该是行），该解决方案应该可以工作：

var rows = $('.fotm-table tr'); 
    $(rows).each(function(){ 
     $('input:first', $(this)).on('change', function(){ 
      var fromValue = $(this).val(); 
      var row = $(this).closest('tr'); 
      $('td:last input', row).val(parseInt(fromValue) + 1); 
     }); 
    });

代码获取表中的所有行以及它们中的每一行都会添加一个侦听器，当您更改第一个文本框（输入）时，它将更改下一个文本框的值（这里是将它加1）。

来源

2015-07-03 14:37:25 douglasf89

谢谢@ douglast89 – PrinceT

您可以使用从link这个棘手的解决方案：

$('#txtFinancialYearFrom').change(function(el) { 
    $(':input:eq(' + ($(':input').index(this) + 1) + ')').val('test'); 
});

https://jsfiddle.net/g34yqL0u/2/

来源

2015-07-03 14:21:29 suvroc

如果我理解正确的话，你需要的东西是这样的：

/* Loop through all table rows */ 
 
$('tr','table.fotm-table').each(function() { 
 
    var tr = this; 
 
    /* Cache all inputs a jquery object - you may want to specify which type of input you are targeting i.e. $('input[type="text"]') */ 
 
    var inputs = $('input',tr); 
 
    /* Cache the slave (second in the example) input in a jquery object - you can do the same for multiple inputs, simply by modifying the eq() index parameter 
 
    */ 
 
    var slaveInput = inputs.eq(1); 
 
    /* Listen for changes on the master input */ 
 
    var masterInput = inputs.eq(0).on('change',function() { 
 
    /* Do smt on the slave input - fill it with the next year in the example */ 
 
     var year = $(this).val(); 
 
     var followingYear = parseInt(year,10)+1 
 
     slaveInput.val(followingYear); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="fotm-table">      
 

 
         <tr> 
 
          <td class="text-right" width="120"> 
 
           <span id="ContentPlaceHolder1_lblFinancialYear">Financial Year :</span> 
 
          </td> 
 
          <td> 
 
           <span> 
 
            <input type="text" id="txtFinancialYearFrom" 
 
\t \t \t \t \t \t \t \t \t name="ctl00$ContentPlaceHolder1$txtFinancialYearFrom"> 
 
           </span> 
 
          </td> 
 
          <td width="20" align="center"> 
 
           <span style="align-content: center">to</span> 
 
          </td> 
 
          <td> 
 
           <span> 
 
            <input type="text" id="txtFinancialYearTo" 
 
\t \t \t \t \t \t \t \t \t name="ctl00$ContentPlaceHolder1$txtFinancialYearTo"> 
 
           </span> 
 
          </td> 
 
         </tr>       
 
        </table>

这里的的jsfiddle的更新叉您提供： https://jsfiddle.net/jkdaza/thonfzwu/5/

来源

2015-07-03 14:53:13 Dario

谢谢@Dario。这是梦幻般的！！ – PrinceT

如何使用jquery查找下一个元素？

回答

相关问题