Search code examples
htmlcssparentclosestsiblings

how to get the value on input filed in another div?

I have the following html

<div class="row"> 

  <div class="col-lg-6">
    <label class="radio">
    <input type="checkbox">
    </label>
  </div>

  <div class="col-lg-1">
    <input type="text" disabled="" class="col-lg-2 form-control" name="notes_33">
  </div>

</div>

there is an on click event on the checkbox input in "col-lg-6" div, i want to get the value input text under "col-lg-1", here is my way to get it

$("#medication").on('click', ':checkbox', function(){

    var $note = $(this).parent().parent().siblings('.col-lg-1').find(":text");
    //... change the value of $note

});

is my way is good? is there any better way to traverse to the input filed starting from the check box?

Solution

  • This looks like simpler:

     $(this).closest('.row').find(':text')

    Edit:

    Here is the comparisons between closest and parents:

    http://jsperf.com/jquery-parents-vs-closest