名前またはクラスのすべての要素ではなく、テーブル行の現在の子要素で作業する

Question

クラス/名前のすべての要素を処理するのではなく、特定のテーブル行にjQuery関数を制限する必要があります。追加した後に一意のIDを取得する方法を知っていれば、ここでIDを使用できます。フィールドを追加するたびにユニークなIDを作成しなければならないので、これは簡単でエレガントな方法ではないと思います。ですから私は、自分が作業している子入力フィールドの正確な親を得る正しい方法、または親を選択する別の多分洗練された方法をfind（）がどのように使用するのかを探しています。に行を追加します。この

<table> 
    <tr> 
    </tr> 
    <tr class="service_list"> 
     <td><a href="#" onclick="add_row();">+</a></td> 
    </tr> 
</table> 

機能「add_row（）」のように見える形で テーブル：ここに尋ねた他の質問の助けを借りて

、私は次のコードを作成しましたテーブル

function add_row() 
{ 
    $('table tr.service_list:last').after('<tr>\ 
     <td>\ 
      <select class="profile service" name="service_list[]">\ 
       <option value="50">service50</option>\ 
       <option value="100">service100</option>\ 
      </select>\ 
     </td>\ 
     <td>\ 
      <input type="text" name="rate[]" value="1" />\ 
     </td>\ 
     <td>\ 
      <input type="text" name="single_price[]" value="50" \>\ 
     </td>\ 
     <td>\ 
      <input type="text" name="total[]" value="50" />\ 
     </td>\ 
    </tr>'); 
} 

ユーザーは、このjQueryのは

を誘発している「attributeStartsWith」セレクタのおかげで選択フィールドを変更

「率」フィールドが変更されたときに、これは、すべてのフィールドの値が「合計」は変更されます始まる名前総額もちろん

$(document).on('input', '[name^=rate]', function(e) { 
    var rate = $('input[name^=rate]').val(); 
    var orig_price = $('[name^=single_price]').val(); 

    var total = orig_price * rate; 

    $('[name^=total]').val(total); 
}); 

それが今であるように計算するトリガされます。クラスを使うと同じことが起こります。

Answer 1

イベントを発生させた要素と同じtr内にある要素を見つけるには、jQuery DOMトラバーサルメソッドを使用する必要があります。この場合、あなたはこのように、closest()とfind()を使用することができます：あなたは上のクラスを使用してコードからより良いパフォーマンスを見ることができる

$(document).on('change', 'select', function(e) { 
    var $row = $(this).closest('tr'); 
    var value = $row.find('select[name^=service_list]').val(); 
    var rate = $row.find('input[name^=rate]').val(); 
    var total = value * rate;  
    $row.find('[name^=single_price]').val(value); 
    $row.find('input[name^=total]').val(total) 
}); 

$(document).on('input', '[name^=rate]', function(e) { 
    var $row = $(this).closest('tr'); 
    var rate = $row.find('input[name^=rate]').val(); 
    var orig_price = $row.find('[name^=single_price]').val();  
    var total = orig_price * rate;  
    $row.find('[name^=total]').val(total); 
}); 

注セレクタ「属性は、で始まります」。