Find an element in the nearest cell (td) using jquery?

Question

Below is a function to convert value A when value B is entered and vice versa.

I am trying to work out an efficient way to target only the nearest matching input using javascript or jQuery .

I've tried jQuery siblings , closest , prev and find .

QUESTION

Using Javascript what is an efficient way to target an element in an adjacent cell without the search function becoming convoluted?

---

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

using jquery only

$("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

Your main issue is because the this keyword does not reference the element that raised the event when you attach your event handlers via attributes. You can get around this by attaching your events in JS instead.

You can then use closest() to find the parent tr element, and find() the related input within that row. Try this:

<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

Since you are using jQuery use it for event handles as well

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

 <script src="http://code.jquery.com/jquery-latest.min.js"></script> <table> <tr> <td> <input class="A" value="0" /> </td> <td> <input class="B" value="0" /> </td> </tr> <tr> <td> <input class="A" value="0" /> </td> <td> <input class="B" value="0" /> </td> </tr> </table> 

Answer 4

You can try this:

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

Better to use more specific class names/identifiers though.

Answer 6

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