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

我有一个脚本来做一些计算，但是目标字段在中继器中。如何使用Javascript查找和定位最接近的类？

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

我一直在尝试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>

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/

来源

2014-02-14 Obsidian

你可能想使用的一般概念是要找到相应的.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(); 
});

来源

2014-02-14 14:33:04 jfriend00

增加'calculate（）'函数。 – jfriend00

欣赏努力，但无法得到这个工作。 http://jsfiddle.net/JZ7Ad/15/ – Obsidian

@DreamTeK - 它现在的答案与最新版本的代码一起工作http://jsfiddle.net/jfriend00/5vKyN/ - 我认为你有一个版本在我改正它之前，在它中输入错字。 – jfriend00

这里：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); 
}) 

});

你应该extraxt它法了更好的代码。但作品

来源

2014-02-14 14:36:06 brunozrk

然而第二排看似努力却没有正确计算。 – Obsidian

已编辑，现在的作品 – brunozrk

请参阅http://jsfiddle.net/JZ7Ad/17/ – brunozrk

相关的输入是在相同的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?

来源

2014-02-14 14:40:29 roo2

应该为你工作：

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

来源

2014-02-14 14:44:53 cinek

+1的最小标记。谢谢。 – Obsidian

哎呀，同时调试大家都已经回答）））这里为t ested解决方案：添加一个“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(); 
});

来源

2014-02-14 14:48:55

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

回答

相关问题