[英]How to get next input element id by using class in jquery?
我必須使用jquery在第一個文本框的更改事件上獲取下一個文本框id。 我該怎么辦。 我為此使用了next(),但它沒有按我想要的那樣工作。
這是我的代碼,
<table>
<tbody>
<tr>
<td>
<p>PF Value</p><br>
</td>
<td>
<span id="ctl00_ctl00_bcr_bcr_TextBox1" class="txtfill" style="display: inline-block;">
<input name="ctl00$ctl00$bcr$bcr$TextBox1$textbox1" class="txtSec80CCD" value="0" id="ctl00_ctl00_bcr_bcr_TextBox1_textbox1" onblur="calcDedSecCCD(this)" style="width: 70px;" type="text">
<span id="ctl00_ctl00_bcr_bcr_TextBox1_valCustom" style="color: Red; display: none;">*</span>
<div id="ctl00_ctl00_bcr_bcr_TextBox1_ErrorDiv" class="ValidatorErrorDiv" style="display:none">
<span id="ctl00_ctl00_bcr_bcr_TextBox1_Label1">You must enter a <br>number</span>
</div>
</span>
</td>
<td>
<span id="ctl00_ctl00_bcr_bcr_TextBox2" class="txtfill" style="display: inline-block;">
<input name="ctl00$ctl00$bcr$bcr$TextBox2$textbox1" class="txtSec80CCD" value="0" id="ctl00_ctl00_bcr_bcr_TextBox2_textbox1" style="width: 70px;" type="text">
<span id="ctl00_ctl00_bcr_bcr_TextBox2_valCustom" style="color: Red; display: none;">*</span>
<div id="ctl00_ctl00_bcr_bcr_TextBox2_ErrorDiv" class="ValidatorErrorDiv" style="display:none">
<span id="ctl00_ctl00_bcr_bcr_TextBox2_Label1">You must enter a <br>number</span>
</div>
</span>
</td>
</tr>
<tr>
<td>
<p>Life Insurance Premium</p><br>
</td>
<td>
<span id="ctl00_ctl00_bcr_bcr_TextBox3" class="txtfill" style="display: inline-block;">
<input name="ctl00$ctl00$bcr$bcr$TextBox3$textbox1" class="txtSec80CCD" value="0" id="ctl00_ctl00_bcr_bcr_TextBox3_textbox1" onblur="calcDedSecCCD(this)" style="width: 70px;" type="text">
<span id="ctl00_ctl00_bcr_bcr_TextBox3_valCustom" style="color: Red; display: none;">*</span>
<div id="ctl00_ctl00_bcr_bcr_TextBox3_ErrorDiv" class="ValidatorErrorDiv" style="display:none">
<span id="ctl00_ctl00_bcr_bcr_TextBox3_Label1">You must enter a <br>number</span>
</div>
</span>
</td>
<td>
<span id="ctl00_ctl00_bcr_bcr_TextBox4" class="txtfill" style="display: inline-block;">
<input name="ctl00$ctl00$bcr$bcr$TextBox4$textbox1" class="txtSec80CCD" value="0" id="ctl00_ctl00_bcr_bcr_TextBox4_textbox1" style="width: 70px;" type="text">
<span id="ctl00_ctl00_bcr_bcr_TextBox4_valCustom" style="color: Red; display: none;">*</span>
<div id="ctl00_ctl00_bcr_bcr_TextBox4_ErrorDiv" class="ValidatorErrorDiv" style="display:none">
<span id="ctl00_ctl00_bcr_bcr_TextBox4_Label1">You must enter a <br>number</span>
</div>
</span>
</td>
</tr>
......
......
......
</tbody>
</table>
我是這樣寫我的劇本的,
function calcDedSecCCD(id) {
var eid = $(id).attr('id');
//var elementVal = $('#' + eid).val();
//var nxtEid = $(eid).next(':input .txtSec80CCD').attr('id');
var nextele = $(this + ':input .txtSec80CCD').next();
//alert(nextele);
var nextId = $(nextele).attr('id');
alert("First Element: "+eid);
alert("First Element: " + nextId);
}
我想要textbox1的更改事件上的文本框ID:ctl00 $ ctl00 $ bcr $ bcr $ TextBox2 $ textbox1。 我如何獲得使用類輸入文本的ID。 或以其他任何方式在第一個文本框更改時獲取下一個文本框的ID。
您已經編寫了標記,以致於難以閱讀。 隨着時間的流逝,您將逐漸體會到簡短的ID,名稱等,因為無需在每個選擇器中使用40個字符,這只會使得很難編寫javascript和css,甚至以后更難以閱讀和理解代碼。
您還設法創建了一個復雜的嵌套元素系統,幾乎可以肯定這是不必要的,並且很難使用javascript遍歷,使其更加簡單通常是一個好主意。
首先,您可能不應該將“ id”作為變量傳遞給函數,因為“ id”實際上在javascript中做了一些事情(它獲取元素id,請參見下面的腳本)。
如果僅在每個“ td”中查找下一個輸入元素,則下面的內容將起作用,但不適用於“ td”中的最后一個輸入以查找下一個“ tr”中的下一個輸入,等等。 。
function calcDedSecCCD(elm) {
var eid = elm.id;
var nextId = $(elm).parents('td').next().find('input')[0].id;
alert("First Element: "+eid);
alert("Next Element: "+nextId);
}
這是一塊
您可能會使用jquery索引功能
var $spans = $("td>span.txtfill");
// Your next function
function get_next_span(elem){
var $span = $(elem).closest('td>span.txtfill'),
index = $spans.index($span);
return $spans.eq(index+1);
}
因此,如果您有一個文本字段,則可以使用如下的輔助函數:
var $current = $("#ctl00_ctl00_bcr_bcr_TextBox2_textbox1"),
$next = get_next_span($current).find('input[type=text]');
或在變更事件中:
$("input[type=text]").change(function(){
get_next_span(this).find('input[type=text]').show();
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.