jquery выберите элемент в таблице перед другим

Question

У меня есть таблица, в которую я добавляю несколько строк

....
<td><strong class="has-text-success thisState">Connect</strong></td>
<td><a class="is-danger buttonDisconnect"><strong>Disconnect</strong></a></td>
....

Мне нужно выбрать .thisState, нажав на кнопку .buttonDisconnect .... Я пытаюсь это сделать, но не работает

$('#table').on('click', ".buttonDisconnect", function () {
    .... disconnection code
    $(this).html("<strong>Connect</strong>");
    $(this).toggleClass("buttonDisconnect is-danger buttonConnect has-text-success");
    // toggle state
    $(this).prev(".thisState").text("Disconnect");
    $(this).prev(".thisState").toggleClass("has-text-danger has-text-success");
});

Answer 1

Если вы передадите селектор в .prev, предыдущий элемент будет выбран только , если предыдущий элемент соответствует селектору. Но селектор, который вы передаете, предназначен для потомка предыдущего элемента - он не соответствует предыдущему элементу.

Другая проблема заключается в том, что выбранный элемент - это <a>, не <td> - перейдите к родительскому элементу <td> перед переходом к предыдущему.

Перейдите к предыдущему элементу безоговорочно и используйте от .children до go для его дочерней фильтрации с помощью селектора, затем сделайте то, что вам нужно:

const $prevStrongState = $(this).parent().prev().children('.thisState');
$prevStrongState.text("Disconnect");
$prevStrongState.toggleClass("has-text-danger has-text-success");

$('#table').on('click', ".buttonDisconnect", function() {
  $(this).html("<strong>Connect</strong>");
  $(this).toggleClass("buttonDisconnect is-danger buttonConnect has-text-success");
  const $prevStrongState = $(this).parent().prev().children('.thisState');
  $prevStrongState.text("Disconnect");
  $prevStrongState.toggleClass("has-text-danger has-text-success");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
  <tr>
    <td><strong class="has-text-success thisState">Connect</strong></td>
    <td><a class="is-danger buttonDisconnect"><strong>Disconnect</strong></a></td>
  </tr>
</table>

Answer 2

Когда вы вызываете prev, вы получаете предыдущий элемент вашего текущего элемента.

Поскольку у вашего элемента нет предыдущих родных элементов, это ничего не возвращает. Вместо этого вам нужно go подняться в DOM, чтобы получить предыдущий td, а затем искать thisState потомков:

$(this).closest('td').prev('td').children(".thisState");