使用jquery在最近的单元格（td）中查找元素？

Question

以下是在输入值 A 时转换值 B 的功能，反之亦然。

我正在努力找到一种有效的方法，使用 javascript 或 jQuery 来定位仅最近的匹配输入。

我尝试过jQuery siblings，closest，prev和find。

问题

使用Javascript什么是一种有效的方法来定位相邻单元格中的元素而不会使搜索功能变得错综复杂？

DEMO

HTML

<td><input class="A" value="0" OnChange="convertA(this.id, this.value);"/></td>
<td><input class="B" value="0" OnChange="convertB(this.id, this.value);"/></td>

JQUERY

function convertA(id, value) {
    $('.B').val(value * 2);
}
function convertB(id, value) {
    $('.A').val(value / 2);
}

Answer 1

仅使用jquery

$("input").change(function() {
    var n = this.value;
    if ($(this).hasClass("B")) {
        n = this.value / 2;
    } else {
        n = this.value * 2;
    }
    $(this).closest("td").siblings().find("input").val(n);
});

Fiddle

*

Answer 2

您的主要问题是，当您通过属性附加事件处理程序时，this关键字不会引用引发事件的元素。您可以通过在JS中附加事件来解决这个问题。

然后，您可以使用closest()查找父tr元素，并使用find()该行中的相关input元素。试试这个：

<tr>
    <td><input class="A" value="0" /></td>
    <td><input class="B" value="0" /></td>
</tr>

$('.A').change(function() {
    var id = this.id;
    var value = this.value;
    $(this).closest('tr').find('.B').val(value * 2);
});

$('.B').change(function() {
    var id = this.id;
    var value = this.value;
    $(this).closest('tr').find('.A').val(value / 2);
});

Updated fiddle

Answer 3

由于您使用的是jQuery，因此也可以将它用于事件句柄

＆＃13;

＆＃13;

INSERT  INTO tbResult(NAME, VALUETAG, DESC)
SELECT e.NAME, t.VALUETAG, t.DESC FROM #TempEmploye e CROSS JOIN #TempTag t

＆＃13;

jQuery(function($) {
  //use jQuery event handlers
  $('.A').change(function() {
    //find the element in the same row and update
    $(this).closest('tr').find('.B').val((this.value / 2) || 0)
  });
  $('.B').change(function() {
    $(this).closest('tr').find('.A').val((this.value * 2) || 0)
  });
})

＆＃13;

＆＃13;

＆＃13;

Answer 4

你可以试试这个：

$(document).ready(function(){
    $(".A").on("input", function(){
        $(this).closest("tr").find("input.B").val(eval($(this).val()*2));
    });
    $(".B").on("input", function(){
        $(this).closest("tr").find("input.A").val(eval($(this).val()/2));
    });
});

<强> DEMO

Answer 5

$(".A, .B").on("keyup", function(){
    $(this).hasClass("A") ? $(this).closest("tr").find(".B").val(this.value * 2) : 
                            $(this).closest("tr").find(".A").val(this.value / 2);
});

jsFiddle here

最好使用更具体的类名/标识符。

Answer 6

定位相邻单元格中元素的最有效方法是使用.next()方法...