javascript - 如何使用 Javascript 查找和定位最近的类？

Question

我有一个脚本可以进行一些计算，但是目标字段在转发器中。

如何让我的脚本以同一行中的类为目标？

我一直在尝试 jquery .closest() 但收效甚微。

中继器输出

<table>
    <tr>
        <td>
            <input class="Time1" value="10:00" />
        </td>
        <td>
            <input class="Time2" value="12:00" />
        </td>
        <td>
            <input class="Hours" value="0" />
        </td>
    </tr>
</table>

<table>
    <tr>
        <td>
            <input class="Time1" value="10:00" />
        </td>
        <td>
            <input class="Time2" value="12:00" />
        </td>
        <td>
            <input class="Hours" value="0" />
        </td>
    </tr>
</table>

脚本

$(function () {
  function calculate() {
    var time1, time2, hours1, hours2, mins1, mins2, hours, mins;
    time1 = $(".Time1").val().split(':'),
    time2 = $(".Time2").val().split(':'),
    hours1 = parseInt(time1[0], 10),
    hours2 = parseInt(time2[0], 10),
    mins1 = parseInt(time1[1], 10),
    mins2 = parseInt(time2[1], 10),
    hours = hours2 - hours1,
    mins = 0;
    if (hours < 0) hours = 24 + hours;
    if (mins2 >= mins1) {
      mins = mins2 - mins1;
    }
    else {
      mins = (mins2 + 60) - mins1;
      hours--;
    }
    mins = mins / 60; // take percentage in 60
    hours += mins;
    hours = hours.toFixed(2);
    $(".Hours").val(hours);
  }
  $(".Time1,.Time2").change(calculate);
  calculate();
});

JSFIDDLE

在此示例中，当您更新第一行中的时间时，两行中的最后一列都将更新。但是，当您更新第二行时什么也没有。

http://jsfiddle.net/JZ7Ad/

Answer 1

您可能想要使用的一般概念是找到对应的 .Time1、.Time2 和 .Hours，它们都在同一行中，并使您的函数仅对它们同时运行。您当前的脚本没有关注项目所在的行。

查找都在共同父项中的事物的一般思路是从一个特定项目开始，然后使用 .closest() 找到共同父项，然后使用 .find( ) 从共同父项中查找同一父项下的其他项。

.closest("tr") 的工作原理是从您的起点向上父链并找到与选择器匹配的最近父链。一旦你有了它，你就可以使用 .find() 在同一行中找到你想要的其他元素。这样，您可以在同一行中找到三个对象并将它们作为一个单元进行操作，而无需考虑其他行中的所有其他元素。

例如，此脚本将遍历每个 .Time1 元素并在同一行中找到其他对应的两个元素。

// for each .Time1
$(".Time1").each(function() {
    var time1Obj = $(this);
    // find the row
    var row = time1Obj.closest("tr");
    // find the .Time2 in that row
    var time2Obj = row.find(".Time2");
    // find the .Hours in that row
    var hoursObj = row.find(".Hours");

    // now you have all three elements that you can make your script operate on
});

将该逻辑放入您的计算函数中，您可以这样做:

$(function () {
  function calculate() {
    // for each .Time1
    $(".Time1").each(function() {
        var time1Obj = $(this);
        // find the row
        var row = time1Obj.closest("tr");
        // find the .Time2
        var time2Obj = row.find(".Time2");
        // find the .Hours
        var hoursObj = row.find(".Hours");

        // now you have all three elements that you can make your script operate on

        var time1, time2, hours1, hours2, mins1, mins2, hours, mins;
        time1 = time1Obj.val().split(':'),
        time2 = time2Obj.val().split(':'),
        hours1 = parseInt(time1[0], 10),
        hours2 = parseInt(time2[0], 10),
        mins1 = parseInt(time1[1], 10),
        mins2 = parseInt(time2[1], 10),
        hours = hours2 - hours1,
        mins = 0;
        if (hours < 0) hours = 24 + hours;
        if (mins2 >= mins1) {
          mins = mins2 - mins1;
        }
        else {
          mins = (mins2 + 60) - mins1;
          hours--;
        }
        mins = mins / 60; // take percentage in 60
        hours += mins;
        hours = hours.toFixed(2);
        hoursObj.val(hours);
    });

  }
  $(".Time1,.Time2").change(calculate);
  calculate();
});