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」があればそれを削除し、無ければ付与するという処理です。