jQueryのend関数の利用方法例

jQueryで用意されている、end関数を使うと一つ前の状態に戻すことができます。

例) end関数の利用方法

<table id="table">
  <tr>
    <td class="td1">None</td>
    <td class="td2">None</td>
  </tr>
  <tr>
    <td class="td1">None</td>
    <td class="td2">None</td>
  </tr>
</table>
$("#btn").click(function() {
  $.each($("#table tbody").children(), function(i, tr) {
    $(this).find(".td1").text((i + 1) + "1")
      .end().find(".td2").text((i + 1) + "2");
  });
});

上記ではend関数を使って、TR → TD.td1 → TD → TR → TD.td2と遷移させながらテキストを設定しています。(TD → TRの部分がend関数)

※ ただし、現在フォーカスされている要素を正確に把握できていないと、コードが解読しにくくなるかもしれません。上記例ではend関数ではなく$(this)を使った方がわかりやすいし、そうでなくても編集に代入して使い回す方が読みやすいかもしれません。

この記事が役に立った場合、シェアしていただけると励みになります!!