如何使用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>
脚本
$(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/
您可能想要使用的一般概念是找到相同的.Time1，.Time2和.Hours，它们都在同一行中，并使您的功能只在它们一起操作。 您当前的脚本不关注项目所在的行。
寻找一个共同的父的事情是所有的总体思路是先从一个特定的项目，然后用找到共同的父.closest()然后使用.find()从公共父找在同其他项目家长。
.closest("tr")工作原理是从您的起始点上.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();
});
这里：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);
})
});
你应该为更好的代码提供方法。 但工作
这应该适合你：
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();
});