选择没有特定类的表行

Posted 2023-02-25

【中文标题】选择没有特定类的表行

【英文标题】：Selecting a table row that does not have a specific class

【发布时间】：2019-02-05 15:21:11

【问题描述】：

我正在尝试将输入集中在表格行中，但我需要“跳转”一些具有特定类的 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/

【参考方案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>