Question

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

如何让我的脚本在同一行中定位该类？

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

REPEATER OUTPUT

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

SCRIPT

$(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();
});

Answer 2

此处：http://jsfiddle.net/JZ7Ad/17/

$(function () {
$(".Time1").change(function(){
  var time1, time2, hours1, hours2, mins1, mins2, hours, mins;
    time1 = $(this).val().split(':');
    time2 = $(this).parent().next().find('.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);

    $(this).parent().next().next().find(".Hours").val(hours);
});

$(".Time2").change(function(){
  var time1, time2, hours1, hours2, mins1, mins2, hours, mins;
    time1 = $(this).parent().prev().find('.Time1').val().split(':');
    time2 = $(this).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);

    $(this).parent().next().find(".Hours").val(hours);
})

});

您应该提取它以获得更好的代码。但是作品

Answer 3

应该适合你：

http://jsfiddle.net/JZ7Ad/22/

$(function () {
        function calculate() {
            $('table tr').each(function (index) {
                var time1, time2, hours1, hours2, mins1, mins2, hours, mins;
                time1 = $(this).find(".Time1").val().split(':'),
                time2 = $(this).find(".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);
                $(this).find(".Hours").val(hours);

            });
        }

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

Answer 4

相关输入属于同一个tr，我们可以从同一tr中选择其他元素。

(".Time1,.Time2").change(function(){
   var parentRow = $(this).parents('tr');
   var myTime1 = parentRow.find('.Time1');
   var myTime2 = parentRow.find('.Time2');
   var myHours = parentRow.find('.Hours');


});

jQuery: selecting grandparents

How to get the children of the $(this) selector?

Answer 5

哎呀，虽然调试了每个人已经回答）））这是经过测试的解决方案：向表元素添加“tcont”类并且......

$(function () {
    function calculate() {
        var containers = $('.tcont');
        containers.each(function(index, el) {
            var time1, time2, hours1, hours2, mins1, mins2, hours, mins;
            time1 = $(".Time1", el).val().split(':'),
            time2 = $(".Time2", el).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", el).val(hours);
        });
    }
    $(".Time1,.Time2").change(calculate);
    calculate();
});

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

5 个答案: