【jQuery】bodyに現在表示されているページのディレクトリ名を付与する

開始タグ

静的なWebサイトをコーディングしている最中に、body要素にclassを付与してそのページにしか効かないようなCSSを書いたりする時があります。
このいちいちhtmlに書いていく作業が本当に面倒臭かったので、jQuery先生にお願いしました。

方法

１、現在いるページのディレクトリ名を取得する。
２、ついでに現在いるページの１階層上のディレクトリ名も取得する。
３、その取得したディレクトリ名の文字列冒頭にb_をつける。
４、b_がついた状態の文字列をクラス名としてbody要素に付与する。

sample.js

$(function() {
	var loc = location.pathname.split("/"); //パス名を/で分割して取得
	var dirName = loc[loc.length - 2]; // 文字列の後ろから２番目を取得
	var dirNamePar = loc[loc.length - 3]; //　文字列の後ろから３番目を取得

	// bodyに所属ディレクトリclass名付与
	$('body').addClass('b_' + dirName + ' ' + 'b_' + dirNamePar);
});

例：/hoge/hoge2/hoge3/
上から三行をコンソールで確認してみると・・・

var loc = location.pathname.split("/");

コンソール

0: ""
1: "hoge"
2: "hoge2"
3: "hoge3"
4: ""
length: 5

/の前後も取得してしまうので、0,4には何も取得されていません。

var dirName = loc[loc.length - 2];

hoge3

var dirNamePar = loc[loc.length - 3];

hoge2

となります。
ですので、/hoge/hoge2/hoge3/であれば、そのページのbody要素にはb_hoge2 b_hoge3の2つのクラス名が付与されます。

閉じタグ

１階層上のディレクトリも付与しているのは、ディレクトリ全体で効かせる場合もあるので用意しています。
とはいえ、このやり方は完璧ではないので今後自分なりに見つかれば改良していきたいと思います。