click()を使って指定した全てのタグ要素に対して処理を実行する方法【jQuery】

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

click()を使って指定した全てのタグ要素に対して処理を実行するCSSの記述

※クリックエリア（.clk）と文字サイズや太さを変更するliタグのCSS記述です。必要に応じて書き換えてください。

<style type="text/css">
body{
  font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",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>

click()を使って指定した全てのタグ要素に対して処理を実行するHTMLの記述

※クリックエリア（class=”clk”）と文字サイズや太さを変更するliタグ×5を用意します。必要に応じて書き換えてください。

<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>

click()を使って指定した全てのタグ要素に対して処理を実行するJavaScriptの記述

※jquery-2.2.0.min.jsファイルを読み込みます。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】指定した全てのタグ要素に対して処理を実行するデモページ

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

　

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