jQuery 테이블에있는 .next()

Question

동적 테이블을 사용하여 일부 계산 작업을하려고합니다.

PHP for 루프를 사용하여 월의 일일 텍스트 입력이있는 2 개의 행을 만드는 표가 있습니다.

그런 다음 첫 번째 텍스트 입력을 가져와 0.25로 곱한 다음 결과를 옆에있는 텍스트 입력에 표시해야합니다.

모두 작동하지만 다음 텍스트 입력을 선택할 수 없습니다.

이

은 현재입니다 :

$(".miles-input").on('keyup', function(){ 
    var fuel_cost = $('.fuel_cost').val(); 
    fuel_cost = parseFloat(fuel_cost); 
    var miles = $(this).val(); 
    $('.price').val('£' +miles*fuel_cost); 
}); 

표시 등의 생성 생성 외모 :

<td><input type="text" class="miles-input"></td> 
<td><input type="text" class="price"></td> 

나는 현재에 상관없이 변화 (물론) 가격 입력의 모든하지만이 무엇 내가 다음 입력 만 변경하면 안됩니다.

이 나는 ​​시도했다 :

miles.next('.price').val('£' +miles*fuel_cost); 
miles.closest('.price').val('£' +miles*fuel_cost); 

을 heres jsFiddle :

http://jsfiddle.net/cd7t3ohn/

등되지만 없음 작업을. 올바른 방법은 무엇입니까?

Answer 1

miles은 String입니다. 그것은 가장 좋은 대답하지

$(this).parents("tr:first").find(".price:first").val('£' + (miles*fuel_cost)); 

,하지만 작동합니다 : 대신

$(this).next('.price').val('£' +miles*fuel_cost); 

Answer 2

당신은 사용할 수 있습니다 참고로 this 사용합니다. 학부모 tr에 가서 처음으로 .price 클래스를 찾으면됩니다.

Answer 3

이 시도 : HTTP : 요소가 td's``에 포함되므로

$(function() { 
 

 
    $(".miles-input").on('keyup', function() { 
 
     var fuel_cost = $('.fuel_cost').val(); 
 
     fuel_cost = parseFloat(fuel_cost); 
 
     var miles = $(this).val(); 
 
     $(this).closest("tr").find(".price").val('£' + miles * fuel_cost); 
 
     
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
Fuel cost: 
 
<input type='text' class='fuel_cost' value='0.25'> 
 
<br> 
 
<br> 
 
<table style="width:500px"> 
 
    <tr> 
 
     <td>Date</td> 
 
     <td>Miles</td> 
 
     <td>Cost</td> 
 
    </tr> 
 
    <tr class="input"> 
 
     <td>1/2/2015</td> 
 
     <td> 
 
      <input type='text' class='miles-input' /> 
 
     </td> 
 
     <td> 
 
      <input type='text' class='price' /> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>1/2/2015</td> 
 
     <td> 
 
      <input type='text' class='miles-input'/> 
 
     </td> 
 
     <td> 
 
      <input type='text' class='price'/> 
 
     </td> 
 
    </tr> 
 
</table>

Answer 4

내 5 센트

$(this).parent() // get <tr> 
    .next() // next row 
    .children('.price') // <td> with price 
    .etc...