この記事では、jQueryのclick()メソッドを使って、指定したタグ要素全てに対して処理を実行する方法を解説します。
今回は、指定したタグ要素であるliタグに対して、toggleClass()を使ってクラスを追加・削除し、文字のサイズや太さを動的に変更する仕組みを紹介します。Webサイトやアプリケーションで特定の要素を操作したい場合に役立つテクニックです。
click()を使った全てのタグ要素への処理実行 – CSSの記述
まず、クリックするエリア（.clk）と、文字サイズや太さを変更する対象のliタグに対するCSSを記述します。以下の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>
このCSSでは、bodyやh1、そしてクリックエリアの.clkにスタイルを設定しています。特に、liタグにはfont-weight: bold;が指定され、さらにaddtxtクラスが追加されると、文字のサイズや太さが変更されるようになっています。
click()を使った全てのタグ要素への処理実行 – HTMLの記述
次に、クリックエリアと対象となるリスト（liタグ）をHTMLで用意します。ここでは、リストが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>
このHTMLは、クリックするエリアとして.clkを作り、5つのliタグがリストとして表示されています。これにより、liタグ全てに対して処理を実行するための準備が整いました。
click()を使った全てのタグ要素への処理実行 – JavaScriptの記述
まず、jquery-2.2.0.min.jsファイルを読み込みます。JavaScriptでは、jQueryのclick()メソッドとeach()メソッドを使って、クリックされた際に全ての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>
上記のスクリプトは、documentが準備された状態（ready）で実行され、.clkクラスがクリックされた時に、すべてのliタグに対してtoggleClass(“addtxt”)を適用します。これにより、liタグの文字サイズや太さが変わります。
【each】指定した全てのタグ要素に対して処理を実行するデモページ
以下のリンクから、実際にこのコードがどのように動作するかを確認できるデモページを参照できます。
【each】指定した全てのタグ要素に対して処理を実行するデモ
このデモでは、リストの項目がクリックするごとに大きく表示されたり、元に戻ったりする動作を確認することができます。実際の動きを見ながら、コードの理解を深めてください。
まとめ
この記事では、jQueryのclick()とeach()を使って、全てのタグ要素に対して処理を実行する方法を解説しました。特に、toggleClass()を使って、クリックするごとにクラスを追加・削除することで、見た目やスタイルを動的に変更するテクニックを学びました。これにより、インタラクティブなWebサイトやアプリケーションを簡単に作成することが可能です。
今回の方法を応用すれば、他のタグや属性に対しても同様の処理を実行できます。例えば、特定のdivタグ全てに対してスタイルを変更したり、フォームの入力フィールドに特定のクラスを付与することもできます。
ぜひ、今回の知識を活用して、あなたのWeb開発スキルをさらに向上させてください。次回の記事では、さらに複雑な動作や他のjQueryメソッドを組み合わせた高度なテクニックを紹介していきます。
※流用される場合は自己責任でお願いします。
デモページ
