【jQuery】指定した全てのタグ要素に対して処理を実行する方法-each

【jQuery】指定した全てのタグ要素に対して処理を実行する方法-each

jQueryのeachを使うと指定(合致)した全てのタグ要素に対して関数処理を実行することができます。
今回は指定したタグ要素(liタグ)全てに対して、toggleClass関数を実行することでclassを追加・削除して文字サイズや太さを変更してみます。

CSSの記述例

※必要に応じて書き換えてください。

<style type="text/css">
body{
  font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"MS Pゴシック",Arial,sans-serif;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  line-height: 1.8em;
  text-align: center;
}
h1{
  font-size:26px;
  text-align:center;
  font-weight:normal;
  padding:10px 0 20px 0;
  line-height: 1.2em;
}
.clk{
  width: 150px;
  height: 30px;
  cursor: pointer;
  background-color: #cccccc;
  color: #ffffff;
  text-align: center;
  line-height: 28px;
  font-size: 18px;
  font-weight: bold;
  margin: 0 auto;
}
ul{
  width: 150px;
  margin: 40px auto 0 auto;
}
ul li{
  font-weight: bold;
  margin-bottom: 4px;
}
.addtxt{
  font-size: 40px;
  font-weight: bold;
  margin-bottom: 20px;
}
</style>

クリックエリアと文字サイズや太さを変更するliタグのHTMLを記述

※必要に応じて書き換えてください。

<h1>以下をクリックするとeachで指定のliタグ全てにtoggleClassでclass=addtxt追加し、<br>liタグ全ての文字サイズや太さを変えます。</h1>

<div class="clk">クリック</div>

<ul>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
  <li>リスト4</li>
  <li>リスト5</li>
</ul>

jQueryの記述

※class=”clk”エリアをクリックするとeachで指定のliタグ全てにtoggleClassでclass=addtxt追加し、liタグ全ての文字サイズや太さを変えます。

<script src="./jquery-2.2.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){

  $(".clk").click(function () {
    $("li").each(function(){
      $(this).toggleClass("addtxt");
    });
  });

});
</script>

デモページ

【each】指定した全てのタグ要素に対して処理を実行するデモ

 

※流用される場合は自己責任でお願いします。
 デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。