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

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

Contents

click()を使って指定した全てのタグ要素に対して処理を実行するCSSの記述
click()を使って指定した全てのタグ要素に対して処理を実行するHTMLの記述
click()を使って指定した全てのタグ要素に対して処理を実行するJavaScriptの記述
【each】指定した全てのタグ要素に対して処理を実行するデモページ

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>