选择没有特定 class 的 table 行

Question

我正在尝试将输入集中在 table 行中，但我需要 'jump' 一些具有特定 class.

的 tr

我已经用 next/nextAll/nextUntil 试过了，但我唯一能做的就是 select 最后一个输入，而不是下一个。在我的示例中，要聚焦的输入是第三个，但它正在聚焦最后一个。

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

所以基本上你所要做的就是在.find()之前添加.first():

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>

选择没有特定 class 的 table 行

Selecting a table row that does not have a specific class

jquery

class

next