如何在jQuery中使用closest()

Question

我正在尝试通过使用closest()来获取文本框的值。我的表单包含动态创建的表，每行都有一个文本框和按钮。我想在按钮单击事件中显示文本框的值。表格格式如下所示

<table id="dataarea" class="table">
    <tbody>
        <tr>
            <td>jaison<td>
            <td class="amountclm">
                <input id="txtamt" class="amtcls" type="text" value="100">
            </td>
            <td>
                <button id="schedule" class="schbtn btn btn-primary" type="button" onclick="UpdateSchedule()">Confirm</button>
            </td>
        </tr>
        <tr>
            <td>ARUN<td>
            <td class="amountclm">
                <input id="txtamt" class="amtcls" type="text" value="500">
            </td>
            <td>
                <button id="schedule" class="schbtn btn btn-primary" type="button" onclick="UpdateSchedule()">Confirm</button>
            </td>
        </tr>
    </tbody>
</table>

我已经写了一个javascript代码(如下所示)。当代码执行时，它返回一个空值。

函数

function UpdateSchedule() {
    var amt2 = $(this).closest('td.amountclm').find('.amtcls').val();
    alert( amt2); 
}

请让我知道为什么我没有得到空值。

Answer 1

jQuery .closest()从当前元素向上移动，直到找到您指定要查找的内容。jQuery .find()会一直关闭，直到它找到您要查找的内容。

这样做是可行的：

http://jsfiddle.net/6T3ET/

Answer 2

id必须是唯一的，您需要改用类：

<button class="schedule schbtn btn btn-primary" type="button">
<input class="amtcls txtamt" type="text" value="500">  

使用.click()而不是内联onClick处理程序，因为您正在使用jQuery。所以你可以这样做：

$('.schedule').click(function() {
    var amt2 = $(this).closest('td').prev('td.amountclm').find('.amtcls').val();
    alert( amt2); 
});

请注意，.amountclm输入是一个td的子级，它是您单击的.schedule按钮的父td的前一个同级。

Answer 3

尝尝这个

将'this‘替换为'schedule_’类属性

function UpdateSchedule() {

    var amt2 = $(".schedule_").closest('td.amountclm').find('.amtcls').val();
    alert( amt2); 
 }

HTML：

<table id="dataarea" class="table">
    <tbody>
        <tr>
            <td>jaison<td>
            <td class="amountclm">
                <input id="txtamt" class="amtcls" type="text" value="100">
            </td>
            <td>
                <button id="schedule" class="schbtn btn btn-primary schedule_" type="button" onclick="UpdateSchedule()">Confirm</button>
            </td>
        </tr>
        <tr>
            <td>ARUN<td>
            <td class="amountclm">
                <input id="txtamt" class="amtcls" type="text" value="500">
            </td>
            <td>
                <button id="schedule" class="schbtn btn btn-primary schedule_" type="button" onclick="UpdateSchedule()">Confirm</button>
            </td>
        </tr>
    </tbody>
</table>

或者尝试使用Jquery作为

$(document).on('click', '.schedule_',function(){

   var amt2 = $(this).closest('td.amountclm').find('.amtcls').val();
        alert( amt2); 
} );