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

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

• javascript
• jquery
• html
• function
• siblings

Share Improve this question Follow asked May 22, 2015 at 10:20 DreamTeKDreamTeK 34.4k2929 gold badges124124 silver badges178178 bronze badges

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 2

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

*

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./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>

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

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

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

The most efficient way to target an element in an adjacent cell is using .next() method...