jQueryのeach文で特定条件ループを作る

goto_jp 1,859views 更新:2014年4月8日

each文の詳細についてはこちら。
http://semooh.jp/jquery/api/core/each/callback/

HTML

<ul>
  <li><a href="#">リンク項目</a></li>
  <li><a href="#">リンク項目</a></li>
  <li><a href="#">リンク項目</a></li>
  <li><a href="#">リンク項目</a></li>
</ul>

例えば上記のリストの偶数番目の<li>タグにクラス「even」を自動的に付与する場合は下記になります。

JavaScript

$(function(){
    $("li:even").each(function(){
        $(this).addClass("even");
    });
});

2行目の (“li:even”) が each の条件になります。
3行目では jQuery の addClass を利用してクラス「even」を付与します。

eachを使いこなせばリストのような多数ある要素を一括して走査・加工することができるので便利です。
若干長くなりますが例えば下記の例。

$(function () {
  $(".switch").click(function () {
    $("li").each(function() {
      if(this.className == "active") {
        this.removeClass("active");
      } else {
        this.addClass("active");
      }
    }
  });
});

クラス「switch」をクリックした時に動作。
<li>要素をループしてクラス「active」があればそれを削除し、無ければ付与するという処理です。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません