Выбор строки таблицы, которая не имеет определенного класса - PullRequest
Новая
       11

Выбор строки таблицы, которая не имеет определенного класса

0 голосов
/ 05 февраля 2019

Я пытаюсь сфокусировать ввод внутри строки таблицы, но мне нужно «перепрыгнуть» некоторые 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 Ответ

0 голосов
/ 05 февраля 2019

Ваша проблема заключалась в том, что вы выбрали каждый .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>
...