jquery - 如何通过jquery获取当前输入字段索引

Question

我有以下 html 表格布局:

<table id="mytable">
<tbody>
<tr>
    <td><input type="text" value="" /></td>
    <td><input type="text" value="" /></td>
    <td><input type="text" value="" /></td>
    <td>Some cell text</td>
    <td></td>
    <td><input type="text" value="" /></td>
    <td></td>
  </tr>
  <tr>
    <td><input type="text" value="" /></td>
    <td><input type="text" value="" /></td>
    <td>Some cell text</td>
    <td></td>
    <td>Some cell text</td>
    <td><input type="text" value="" /></td>
  </tr>

</tbody>
</table>

单击任何输入字段时，我需要知道相应行的当前输入字段索引，但无法找到获取它的方法。我可以通过以下公式获得每行的输入字段总数(长度):

var thisRow = $(this).closest('tr');
var inputLength = thisRow.find('input[type="text"]').length;

例如，第一行的 inputLength 是 4，第二行是 3。但是，当用户点击第一行的第二个输入字段(应该是 1)时，如何获取输入索引？

[注意:我不能使用 td 索引代替 input 字段索引，因为您可能会看到可能有一些 td 没有 input 字段。因此，如果我运行 for 循环，它就无法按预期执行。]

Answer 1

您可以使用 index()方法如下:

$(':input').on('click', function() {
  console.log($(this).closest('tr').find(':input').index(this));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable">
  <tbody>
    <tr>
      <td>
        <input type="text" value="" />
      </td>
      <td>
        <input type="text" value="" />
      </td>
      <td>
        <input type="text" value="" />
      </td>
      <td>Some cell text</td>
      <td></td>
      <td>
        <input type="text" value="" />
      </td>
      <td></td>
    </tr>
    <tr>
      <td>
        <input type="text" value="" />
      </td>
      <td>
        <input type="text" value="" />
      </td>
      <td>Some cell text</td>
      <td></td>
      <td>Some cell text</td>
      <td>
        <input type="text" value="" />
      </td>
    </tr>
  </tbody>
</table>

另见 closest()