选择一个表行不具有类特定的

Question

我试图把重点表行内的输入，但我要“跳”一些TR的有一些特定的类。

我已经尝试过与未来/ nextAll / nextUntil，但我能做的唯一事情就是选择最后一个输入，而不是下一个。在我的例子中，要对焦的输入是第三，但它的重点是最后一个。

<table>

  <tr class="product selected">
    <td>
      <input type="text" class="foo">
    </td>
  </tr>
  <tr class="info">
  </tr>

  <tr class="product to_ignore">
    <td>
      <input type="text" class="foo">
    </td>
  </tr>
  <tr class="info to_ignore">
  </tr>

  <tr class="product">
    <td>
      <input type="text" class="foo">
    </td>
  </tr>
  <tr class="info">
  </tr>

  <tr class="product">
    <td>
      <input type="text" class="foo">
    </td>
  </tr>
  <tr class="info">
  </tr>

</table>

$('tr.selected').nextAll('.product').not('.to_ignore, .info').find(".foo").select();

https://jsfiddle.net/s7wo5fzm/

Answer 1

你的问题是，你选择的每一个.product不仅符合您的标准第一。因为你的代码首先sleected第三送入但后来选择了第四ANS再次取消第三。

所以基本上所有你需要做的就是.first()前添加.find()：

var button = $("button");

button.on("click", function(){

$('tr.selected').nextAll('.product').not('.to_ignore, .info').first().find(".foo").select();
  $('tr.selected').removeClass('selected');
  $('input:focus').closest('tr').addClass('selected');
  
})

body {
  background: white;
  padding: 20px;
  font-family: Helvetica;
}

table {
  border: 1px solid black;
}

tr.selected {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="jump">Jump</button>

<table>

  <tr class="product selected">
    <td>
      <input type="text" class="foo">
    </td>
  </tr>
  <tr class="info">
  </tr>

  <tr class="product to_ignore">
    <td>
      <input type="text" class="foo">
    </td>
  </tr>
  <tr class="info to_ignore">
  </tr>

  <tr class="product">
    <td>
      <input type="text" class="foo">
    </td>
  </tr>
  <tr class="info">
  </tr>

  <tr class="product">
    <td>
      <input type="text" class="foo">
    </td>
  </tr>
  <tr class="info">
  </tr>

</table>