How to find and target closest class with Javascript?

Question

I have a script to do some calculations however the target fields are in a repeater.

How can I make my script target the class in the same row?

I have been trying jquery .closest() but with little success.

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

In this example when you update a time in row one the last column in both rows will update. However when you update row two nothing.

http://jsfiddle.net/JZ7Ad/

jfriend00 · Accepted Answer · 2014-02-14T15:05:21.053

The general concept you probably want to use is to find the corresponding .Time1, .Time2 and .Hours that are all in the same row and make your function operate on only them together. Your current script is not paying any attention to what row an item is in.

The general idea for finding things that are all in a common parent is to start with one particular item and then find the common parent using .closest() and then use .find() from the common parent to find the other items under that same parent.

.closest("tr") works by going up the parent chain from your starting point and finding the closest parent that matches the selector. Once you have that, you can then use .find() to find the other elements you want in that same row. In that way, you can find the three objects in the same row and operate on them as a unit without regard for all the other elements in other rows.

For example, this script would iterate through each .Time1 element and find the other corresponding two elements in it's same row.

// 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
});

Putting that logic into your calculate function, you could do this:

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

Appreciate the effort however can't get this working. http://jsfiddle.net/JZ7Ad/15/ — DreamTeK, Feb 14 '14 at 14:46
@DreamTeK - it works with the latest version of the code in the answer now http://jsfiddle.net/jfriend00/5vKyN/ - I think you got a version with a typo in it before I corrected it. — jfriend00, Feb 14 '14 at 14:50
Thank you this works great and well explained to help my understanding of the process. — DreamTeK, Feb 14 '14 at 15:13

brunozrk · Answer 2 · 2014-02-14T14:45:43.817

here: 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);
})

});

You should extraxt it for method for a better code. But works

Appreciate the effort however row two doesn't seem to be calculating correctly. — DreamTeK, Feb 14 '14 at 14:40

cinek · Answer 3 · 2014-02-14T14:50:48.573

that should work for you:

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

score 1 · Answer 4 · edited May 23 '17 at 11:49

1

The related inputs are in the same tr we can select other elements from the same 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?

edited May 23 '17 at 11:49

Community

1
1

answered Feb 14 '14 at 14:40

actual_kangaroo

5,971
2
31
45

score 1 · Answer 5 · answered Feb 14 '14 at 14:48

Oops, while debugged everybody already answered ))) Here is tested solution: Add a "tcont" class to table elements and ...

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

How to find and target closest class with Javascript?

5 Answers5