如何使用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查找下一個元素？

回答

相關問題