how to set value on class with jquery

July 28, 2024

I have below table :

.
.
.

<td >
    <input type="text"   class="car_color"     >
    <input type="hidden" class="number_car" name="my_timelist[times][]" value="0">
</td> 
 
<td >
    <input type="text"   class="car_color"     >
    <input type="hidden" class="number_car" name="my_timelist[times][]" value="0">
</td> 

<td >
    <input type="text"   class="car_color"     >
    <input type="hidden" class="number_car" name="my_timelist[times][]" value="0">
 </td> 
 
.
.
.

I want set value on input with class name class="number_car" by jquery with below code, But this effect on all inputs(have the class name). But I want effect value just on same td.

` $(‘.car_color’).change(function(){

    let datetime    = $(this).val();

   $('.number_car').val( 123456);
});

`
How can I fix?

>Solution :

You could use .closest() to traverse up to the same cell containing the other desired input, then .find() it there. Another alternative is $this.siblings(".number_car") if the elements are siblings.

$(".car_color").change(function () {
  let $this = $(this);
  let datetime = $this.val();
  $this.closest("td").find(".number_car").val(123456);
});

.number_car {
  opacity: 0.5;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<table>
  <tbody>
   <tr>
    <td>
     <input class="car_color" type="text">
     <input class="number_car" name="my_timelist[times][]" value="0" readonly>
    </td>
    <td>
     <input class="car_color" type="text">
     <input class="number_car" name="my_timelist[times][]" value="0" readonly>
    </td>
    <td>
     <input class="car_color" type="text">
     <input class="number_car" name="my_timelist[times][]" value="0" readonly>
    </td>
   </tr>
  </tbody>
 </table>