要素を見つけるJQueryがリストにあります

Question

私は入力があるテーブルを持っており、使用している入力のインデックスを取得しようとしています。例えば

$(document).on('keyup', '.inputs input', function(event) { 
 
    var inputVal = $(this).val(); 
 
    var inputListVal = $(this).parent('tr').index(this); <!-- This is the bit thas not working --> 
 
    console.log(inputListVal); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <th><input type="text" name=""></th> 
 
    <th><input type="text" name=""></th> 
 
    <th><input type="text" name=""></th> 
 
    <!-- I want this index if they are typing init --> 
 
    <th><input type="text" name=""></th> 
 
    </tr> 
 
</table>

Answer 1

について はTR要素にclosest()/.parents()を使ってトラバース。ゼロベースのインデックス

Answer 2

試してみてください。入力のインデックスを取得するにはは注意index()

使用

var inputListVal = $(this).closest('tr').find('input').index(this); 

$(document).on('keyup', 'input', function(event) { 
 
    var inputListVal = $(this).closest('tr').find('input').index(this); 
 
    console.log(inputListVal); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <th><input type="text" name=""></th> 
 
    <th><input type="text" name=""></th> 
 
    <th><input type="text" name=""></th> 
 
    <!-- I want this index if they are typing init --> 
 
    <th><input type="text" name=""></th> 
 
    </tr> 
 
</table>

を使用し、その後、親に入力を取得しますこの$(this).parent('tr th').index();そしてkeyupイベントはあなたのhtmlにはありませんclass="inputs"がありません。 tr thその本

Answer 3

$(document).on('keyup', 'input', function(event) { 
 
    var inputVal = $(this).val(); 
 
    var inputListVal = $(this).parent().index(); 
 
    console.log(inputListVal); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <th><input type="text" name=""></th> 
 
    <th><input type="text" name=""></th> 
 
    <th><input type="text" name=""></th> 
 
    <!-- I want this index if they are typing init --> 
 
    <th><input type="text" name=""></th> 
 
    </tr> 
 
</table>

からthのインデックスを見つけます

これは

Answer 4

$(document).on('keyup', 'input', function(event) { 
 
    var inputListVal = $('input').index(this); 
 
    console.log(inputListVal); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <th><input type="text" name=""></th> 
 
    <th><input type="text" name=""></th> 
 
    <th><input type="text" name=""></th> 
 
    <!-- I want this index if they are typing init --> 
 
    <th><input type="text" name=""></th> 
 
    </tr> 
 
</table>

を試してみてください tr

$(document).on('keyup', 'input', function(event) { 
 
    var inputVal = $(this).val(); 
 
    var inputListVal = $(this).parent('tr th').index(); 
 
    console.log(inputListVal); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <th><input type="text" name=""></th> 
 
    <th><input type="text" name=""></th> 
 
    <th><input type="text" name=""></th> 
 
    <!-- I want this index if they are typing init --> 
 
    <th><input type="text" name=""></th> 
 
    </tr> 
 
</table>