Javascript 如何在jQuery中使用最近的（）

我正试图通过使用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>

---

请告诉我为什么我没有得到空值。

id

必须是唯一的，您需要使用类来代替：

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

请注意，

.amountclm

输入是一个

td

的子项，它是您单击的

.schedule

按钮的父项

td

的前一个兄弟项

试试这个

将“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中使用

.parent（）

和

.prev（）

来解决这个矛盾

$(".schbtn").click(function() {

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

首先，最接近（）不是简单的JavaScript。它是jQuery中的一个函数

它在元素层次结构中向上遍历。并且td.amountclm不在按钮计划的元素层次结构中

因此.closest不会找到它。

jQuery

.closest（）

从当前元素向上移动，直到找到您给它要查找的内容为止。jQuery

.find（）

会一直向下运行，直到找到您给它的要查找的内容为止

这就是诀窍：

<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>

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

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

$(".schbtn").click(function() {

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