jQuery 繰り返し(each)の最後だけに何かしたい時

jQueryの「each」でループした際に、最後の要素にだけ何かしたい時の記述方法のご紹介です。

「each」でループしなければ、「$(“要素:last”)」または「$(“要素:last-child”)」で最後の要素を取得できるのですが
「each」でループする場合は、条件分岐で最後だけ処理を変えたいので、前述した方法では不十分です。

それでは、下のHTMLの最後の要素にクラスを付けるデモで最後の要素へのアクセス方法をご説明します。

HTML

<div class="demo">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
</div>

最後だけに何かする時のコード

jQuery

$(".demo li").each(function(i) {
  // 最後の要素だけ処理をする
  if(i + 1 >= $(".demo li").length) {
    $(".demo li").eq(i).addClass("last");
  }
});

このjQueryを読み込むとHTMLはこのように変化します。

変化したHTML

<div class="demo">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li class="last" >5</li>
  </ul>
</div>

コードの解説

$(".demo li").each(function(i) {

まず「each()」で要素をループ処理します。
ループ処理する際に「function(i)」でインデックス番号を取得します。

（インデックス番号とは、配列の0から始まる要素の番号です。）

if(i + 1 >= $(".demo li").length)

i（インデックス番号）は０から始まり、「.length」で取得した要素は１から始まるので数値にズレが有ります。
なのでi（インデックス番号）に＋１して数値を合わせ、iが要素数以上であれば何かする条件分岐を書きます。

$(".demo li").eq(i).addClass("last");

最後に「.addClass()」でクラスを追加します。
「.eq()」でiを指定し、最後のリストだけクラスを付けます。