jqueryを使用して複数のデータから単一のデータ値を取得する方法

Question

jQueryの問題が発生しました。私はこのコードで間違っていると思う。助けてください。

更新ボタンをクリックして入力ボックスの価値を得ようとしています。しかし、毎回私は最初の番号を取得します。

更新ボタンによるテキスト値が必要です。

$(".update").click(function(){ 
 
\t qty = $(".qty").val(); \t 
 
\t alert(qty); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
\t <tr> 
 
    \t \t <td><input type="text" name="qty" value="5" class="qty" id="qty"/></td> 
 
\t \t <td><button class="update">&#x21BB;</button></td> 
 
    \t </tr> 
 
\t <tr> 
 
    \t \t <td><input type="text" name="qty" value="20" class="qty" id="qty"/></td> 
 
\t \t <td><button class="update">&#x21BB;</button></td> 
 
    \t </tr> 
 
\t <tr> 
 
    \t \t <td><input type="text" name="qty" value="30" class="qty" id="qty"/></td> 
 
\t \t <td><button class="update">&#x21BB;</button></td> 
 
    \t </tr> 
 
\t <tr> 
 
    \t \t <td><input type="text" name="qty" value="50" class="qty" id="qty"/></td> 
 
\t \t <td><button class="update">&#x21BB;</button></td> 
 
    \t </tr> 
 
\t <tr> 
 
    \t \t <td><input type="text" name="qty" value="45" class="qty" id="qty"/></td> 
 
\t \t <td><button class="update">&#x21BB;</button></td> 
 
    \t </tr> 
 
\t <tr> 
 
    \t \t <td><input type="text" name="qty" value="15" class="qty" id="qty"/></td> 
 
\t \t <td><button class="update">&#x21BB;</button></td> 
 
    \t </tr> 
 
\t <tr> 
 
    \t \t <td><input type="text" name="qty" value="70" class="qty" id="qty"/></td> 
 
\t \t <td><button class="update">&#x21BB;</button></td> 
 
    \t </tr> 
 
</table>

Answer 1

高度で

おかげであなたが "リンク" あなたの更新ボタン入力whith ".qty" を持っているあなたは

$(".update").click(function(){ 
 
\t qty = $(this).closest("tr").find(".qty").val(); \t 
 
\t alert(qty); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
\t <tr> 
 
    \t \t <td><input type="text" name="qty" value="5" class="qty" id="qty"/></td> 
 
\t \t <td><button class="update">&#x21BB;</button></td> 
 
    \t </tr> 
 
\t <tr> 
 
    \t \t <td><input type="text" name="qty" value="20" class="qty" id="qty"/></td> 
 
\t \t <td><button class="update">&#x21BB;</button></td> 
 
    \t </tr> 
 
\t <tr> 
 
    \t \t <td><input type="text" name="qty" value="30" class="qty" id="qty"/></td> 
 
\t \t <td><button class="update">&#x21BB;</button></td> 
 
    \t </tr> 
 
\t <tr> 
 
    \t \t <td><input type="text" name="qty" value="50" class="qty" id="qty"/></td> 
 
\t \t <td><button class="update">&#x21BB;</button></td> 
 
    \t </tr> 
 
\t <tr> 
 
    \t \t <td><input type="text" name="qty" value="45" class="qty" id="qty"/></td> 
 
\t \t <td><button class="update">&#x21BB;</button></td> 
 
    \t </tr> 
 
\t <tr> 
 
    \t \t <td><input type="text" name="qty" value="15" class="qty" id="qty"/></td> 
 
\t \t <td><button class="update">&#x21BB;</button></td> 
 
    \t </tr> 
 
\t <tr> 
 
    \t \t <td><input type="text" name="qty" value="70" class="qty" id="qty"/></td> 
 
\t \t <td><button class="update">&#x21BB;</button></td> 
 
    \t </tr> 
 
</table>

に関連付けます

Answer 2

qty変数を次のように変更します。 var thisObj = $（this）; qty = $（thisObj）.parent（）。parent（）。find（ "input"）。

$(".update").click(function(){ 
 
\t qty = $(".qty").val(); \t 
 
\t alert(qty); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
\t <tr> 
 
    \t \t <td><input type="text" name="qty" value="5" class="qty" id="qty"/></td> 
 
\t \t <td><button class="update">&#x21BB;</button></td> 
 
    \t </tr> 
 
\t <tr> 
 
    \t \t <td><input type="text" name="qty" value="20" class="qty" id="qty"/></td> 
 
\t \t <td><button class="update">&#x21BB;</button></td> 
 
    \t </tr> 
 
\t <tr> 
 
    \t \t <td><input type="text" name="qty" value="30" class="qty" id="qty"/></td> 
 
\t \t <td><button class="update">&#x21BB;</button></td> 
 
    \t </tr> 
 
\t <tr> 
 
    \t \t <td><input type="text" name="qty" value="50" class="qty" id="qty"/></td> 
 
\t \t <td><button class="update">&#x21BB;</button></td> 
 
    \t </tr> 
 
\t <tr> 
 
    \t \t <td><input type="text" name="qty" value="45" class="qty" id="qty"/></td> 
 
\t \t <td><button class="update">&#x21BB;</button></td> 
 
    \t </tr> 
 
\t <tr> 
 
    \t \t <td><input type="text" name="qty" value="15" class="qty" id="qty"/></td> 
 
\t \t <td><button class="update">&#x21BB;</button></td> 
 
    \t </tr> 
 
\t <tr> 
 
    \t \t <td><input type="text" name="qty" value="70" class="qty" id="qty"/></td> 
 
\t \t <td><button class="update">&#x21BB;</button></td> 
 
    \t </tr> 
 
</table>