【jQuery】ページ内の全てのリンクに共通クラスを自動付与する方法

HTMLでたくさんのリンクを使う場面では、すべてのリンクに同じスタイルや動作を適用したいことがあります。しかし、毎回手動で class を追加するのは非効率です。そこでこの記事では、jQueryを使ってページ内のすべてのリンク要素（<a>タグ）に、指定した共通クラスを自動的に付与する方法をご紹介します。

基本の書き方

jQueryを使えば非常にシンプルな記述で実現できます。以下のコードをHTMLのフッター付近や、$(document).ready() の中に記述します。

$(document).ready(function () {
  $('a').addClass('common-link');
});

このコードは、ページ内に存在するすべての <a> 要素に common-link というクラスを付与します。これにより、CSSで共通のスタイルを適用したり、クリックイベントを一括で制御することが可能になります。

例：CSSでスタイルを指定

付与されたクラスに対してスタイルを定義すれば、全リンクに自動で適用されます。

.common-link {
  color: #007acc;
  text-decoration: underline;
}

.common-link:hover {
  color: #005999;
}

特定のリンクのみ除外する方法

すべてのリンクにクラスを付けたいが、一部のリンクには適用したくない場合もあります。例えば、すでに .no-style クラスが付いているリンクを除外したい場合は、次のように書き換えます。

$(document).ready(function () {
  $('a:not(.no-style)').addClass('common-link');
});

このように :not() セレクタを使えば、柔軟に対象を制御できます。

特定の範囲内のリンクにだけ適用する場合

たとえば記事本文の中のリンクにだけ適用したい場合は、次のように記述します。

$(document).ready(function () {
  $('.article-body a').addClass('common-link');
});

これにより、.article-body 内にあるリンクだけが対象になります。

まとめ

jQueryを使えば、ページ全体または特定範囲のリンクに共通のクラスを自動で付けられるため、管理の手間を減らしつつデザインや動作の統一が簡単に行えます。手動でクラスを追加する作業から解放され、スタイルやスクリプトの一元管理がしやすくなる点もメリットです。