jQuery .next() when in a table

本文关键字：in table when next jQuery | 更新日期: 2023-09-27

尝试使用动态表进行一些计算工作。

我有一个表，它使用 PHP for 循环来创建 2 行，其中包含每月天数的文本输入。

然后，我需要获取第一个文本输入，并将其乘以 0.25，并在它旁边的文本输入中显示结果。

一切正常，但无法让它选择下一个文本输入。

这是当前：

$(".miles-input").on('keyup', function(){
  var fuel_cost = $('.fuel_cost').val();
  fuel_cost = parseFloat(fuel_cost);
  var miles = $(this).val();
  $('.price').val('£' +miles*fuel_cost);
});

创建时的表如下所示：

<td><input type="text" class="miles-input"></td>
<td><input type="text" class="price"></td>

我

目前拥有的会更改所有价格输入（当然），但无论我尝试什么，我都无法只更改下一个输入。

我试过：

miles.next('.price').val('£' +miles*fuel_cost);
miles.closest('.price').val('£' +miles*fuel_cost);

这里有一个jsFiddle：

http://jsfiddle.net/cd7t3ohn/

等等，但没有一个工作。正确的方法是什么？

您可以使用：

$(this).parents("tr:first").find(".price:first").val('£' + (miles*fuel_cost));

这不是最好的答案，但它会起作用。它会让你进入父tr，然后找到第一个.price类。

miles是一个String。改用this作为参考

$(this).next('.price').val('£' +miles*fuel_cost);

试试这个：

$(function () {
    $(".miles-input").on('keyup', function () {
        var fuel_cost = $('.fuel_cost').val();
        fuel_cost = parseFloat(fuel_cost);
        var miles = $(this).val();
        $(this).closest("tr").find(".price").val('£' + miles * fuel_cost);
       
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
Fuel cost:
<input type='text' class='fuel_cost' value='0.25'>
<br>
<br>
<table style="width:500px">
    <tr>
        <td>Date</td>
        <td>Miles</td>
        <td>Cost</td>
    </tr>
    <tr class="input">
        <td>1 / 2 / 2015</td>
        <td>
            <input type='text' class='miles-input' />
        </td>
        <td>
            <input type='text' class='price' />
        </td>
    </tr>
    <tr>
        <td>1 / 2 / 2015</td>
        <td>
            <input type='text' class='miles-input'/>
        </td>
        <td>
            <input type='text' class='price'/>
        </td>
    </tr>
</table>

我的5美分

$(this).parent() // get <tr>
    .next() // next row
    .children('.price') // <td> with price
    .etc...