Question

我必须使用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);

    }

enter image description here

我想在textbox1的更改事件上使用textbox id：ctl00 $ ctl00 $ bcr $ bcr $ TextBox2 $ textbox1。如何使用类获取文本输入的ID。或者任何其他方式在第一个更改时获取下一个文本框的ID。

Answer 1

您已经编写了标记，因此难以阅读。随着时间的推移，你会发现短ID，名称等，因为不需要在每个选择器中使用40个字符，这使得编写javascript和css变得困难，甚至更难以阅读和理解代码。 / p>

你还设法创建了一个精心设计的嵌套元素系统，几乎肯定是不必要的，并且很难用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);
}

这是FIDDLE

Answer 2

您可以使用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();
});

如何通过在jquery中使用类来获取下一个输入元素id？

2 个答案: