javascript - 使用 prevUntil jquery 查找 pre html 元素

Question

当用户单击 span 元素时，我必须在表的前行中搜索第一个输入元素，并返回包含 td 内输入元素的第一行的编号。例如 span 在表格的第四行，第一个输入元素在表格的第二行。在这种情况下，当用户单击 span 元素时，我必须返回 2。我如何搜索以找到前一行中的第一个输入元素？

<script>
$("span").click(function(){
   $(this).parent().parent().prevUntil("tr > td:nth-child(1)>input").css({"color":"red"});
</script>
<table>
  <tr>
    <td><input></input>11</td>
    <td>12</td>
  </tr>
  <tr>
    <td>21<input></input></td>
    <td>22</td>
  </tr>
  <tr>
    <td>31</td>
    <td>31</td>
  </tr>
  <tr>
    <td><span>click</span></td>
    <td>42</td>
  </tr>
</table>

Answer 1

如果我的理解是对的

//dom ready handler
jQuery(function($) {
  $("span").click(function() {
    var $tr = $(this).closest('tr').prevAll("tr:has(input)").first();
    alert($tr.index() + 1)
    $tr.css({
      "color": "red"
    });
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr>
    <td><input/>11</td>
    <td>12</td>
  </tr>
  <tr>
    <td>21<input/></td>
    <td>22</td>
  </tr>
  <tr>
    <td>31</td>
    <td>31</td>
  </tr>
  <tr>
    <td><span>click</span></td>
    <td>42</td>
  </tr>
</table>