Javascript 使用jQuery查找父元素和最近的元素

我有一个简单的表格

<tr>
    <td> <input type="text" name="qty[]" placeholder="qty"/> </td>
    <td> <input type="text" name="price[]" placeholder="price"/> </td>
    <td> <input type="text" name="total[]" placeholder="Total"/> </td>
</tr>

价格

是

未定义的

还是有更简单的方法？请检查一下电话号码

更新：

.parent（..）

选择当前元素集中每个元素的直接父元素。第一个参数过滤这个集合。输入元素的直接父元素是

td

元素，而不是

tr

元素

$('input[name=\'qty[]\']').on('change keyup', function(){
    var qty = $(this).val();
    var price = $(this).parent().parent().find('input[name=\'price[]\']').val();  
});

---

更新的

首先，考虑将您的html设置为：

<tr>
    <td> <input type="number" name="qty[]" placeholder="qty"/> </td>
    <td> <input type="number" name="price[]" placeholder="price"/> </td>
    <td> <input type="number" name="total[]" placeholder="Total"/> </td>
</tr>

编辑：更好的方法，适当考虑空字段。父项（…）选择当前元素集中每个元素的直接父项。第一个参数过滤此集合。输入元素的直接父元素是

td

元素，而不是

tr

元素

$('input[name=\'qty[]\']').on('change keyup', function(){
    var qty = $(this).val();
    var price = $(this).parent().parent().find('input[name=\'price[]\']').val();  
});

因为您的集合中只有一个元素，所以根本不进行筛选。只需获取父元素两次，就可以选择

tr

元素

$('input[name=\'qty[]\']').on('change keyup', function(){
    var qty = $(this).val();
    var price = $(this).parent().parent().find('input[name=\'price[]\']').val();  
});

我不确定您是否能够更改HTML代码，但如果可以，我认为最好为您的

输入提供
类
class
s，如以下示例所示：

<tr>
    <td> <input class='calculate' type="number" name="qty[]" placeholder="qty"/> </td>
    <td> <input class='calculate' type="number" name="price[]" placeholder="price"/> </td>
    <td> <input class='total' type="number" name="total[]" placeholder="Total"/> </td>
</tr>

希望这有帮助。
只需将
parent（）
更改为
parents（）
：

演示：


从sbout
parents（）引用

获取当前匹配元素集中每个元素的祖先，可选地通过选择器进行筛选。
.parents（）和.parent（）方法类似，不同的是后者只在DOM树上移动一个级别

虽然此代码有效，但您必须处理大量验证。
.parent（..）
选择集合中每个元素的父元素，并通过选择器进行筛选。直接父元素是
td
，而不是
tr
$（this）。parent（'td'）。parent（'tr'）-有效！或者只是
.parent（）.parent（）；不是你在那个集合中有超过1个元素…你也可以考虑添加jQuery（文档）。on（“更改，KEYUP”，“输入[Name＝QTy[] ] ]，输入[Name＝Pale[] ]，输入[Name＝To[[] ] ]，函数（）{为了确保如果有人试图手动更改total，它会重新计算。此外，您可以在其html标记上禁用total（只需在标记内禁用写入）。您的
jQuery（parent_元素）
可以全部替换为
parent_元素
.closest（）
总是返回一个jQuery对象；在这里使用
jQuery（）
不会得到任何东西。好吧，对我来说这是一个规范化的问题，我更喜欢总是让jQuery决定我给它的是一个元素还是一个选择器（这样函数可以接收选择器和元素作为输入）因此，我总是通过jQueryFair传递它，但您只需要对从函数外部接收的输入执行此操作。在这种情况下，
parent\u元素
始终是jQuery对象，因此对其调用
jQuery（）
除了浪费时间外，什么都不会做。（无论如何，我看到您仍然在编写
jQuery（…）.find（…）.val（…）
而不是
jQuery（jQuery（…）.find（…）.val（…）
。如果您不信任
.closest（）
总是返回jQuery对象，为什么您会信任
.find（）
这样做呢？）我相信这不是一个最接近的问题，但是作为一个规则，我不相信一个变量包含一个元素和一个选择器，如果我只是把它放在上面的一行上也没关系，从现在开始2年后，以及后来的很多变化，我会很高兴我之前一直不相信这个变量。正如我所说的，这只是一个规范化的问题排除我所说的关于函数的原因。就速度而言，实际上差不多，与直接调用对象相比，它不会对对象执行更多操作
$('.calculate']').on('change keyup', function(){
    var qty   = parseFloat( $(this).parents('tr').find('.qte').val() );
    var price = parseFloat( $(this).parents('tr').find('.price').val() );  

    $(this).parents('tr').find('.total').val( qty * price );  
});

$('input[name=\'qty[]\']').on('change keyup', function(){
    var qty = $(this).val();
    var price = $(this).closest("tr").find('input[name=\'price[]\']').val();
});