选择没有特定类的表行

Question

我试图将输入集中在表行内，但是我需要“跳过”具有特定类的某些tr。

我已经尝试过使用next / 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，而不仅是第一个符合条件的。因此，您的代码首先选择了第三个输入，然后选择了第四个，然后再次取消选择了第三个。

因此，基本上您要做的就是在.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>