CODEWITHSUNDEEP
javascriptjqueryhtmlfunctionsiblings
DreamTeK
DreamTeK

Reputation: 34227

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

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

Upvotes: 2

Views: 5295

Answers (6)

dsgriffin
dsgriffin

Reputation: 68606

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

Upvotes: 0

Brijesh Bhatt
Brijesh Bhatt

Reputation: 3830

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

Upvotes: 0

Dipesh Rana
Dipesh Rana

Reputation: 367

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

Upvotes: -1

Anoop Joshi P
Anoop Joshi P

Reputation: 25527

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

*

Upvotes: 2

Arun P Johny
Arun P Johny

Reputation: 388336

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>

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337610

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

Upvotes: 1

Related Questions