かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

JSで1つめのクラス名を取得する。

JavaScript jQuery

javascriptで要素についたクラスの1つめだけ取り出したい時。

element.className.split(" ")[0];

で最初のクラス名を取得できます。

たいていjQueryを使っている思うので、

// HTML
<p id="hoge" class="className1 className2">要素だよ</p>

　 

// jQuery
$('#hoge').attr('class').split(" ")[0];

の様な記述をすることが多いんじゃないかと思います。

が、ここでトラップです。
jQueryのattrを使うと、
下のように要素にクラスが無い時にだとsplitできないよ。とエラーが起きてしまいます。

// HTML
<p id="hoge">要素だよ</p>

　 

// jQuery
$('#hoge').attr('class').split(" ")[0];
// ＿人人人人人人＿
// ＞　突然の死　＜
// ￣Y^Y^Y^Y^Y￣

これは、クラス名が存在しない時attr('class')がundefinedを返すのが原因っぽいです。
classNameだとクラス名が無くても''と空文字列がくるのでsplitでエラーが起きないっぽい！
$(element).get(0)とか$(element)[0]とかしてやると良いようです。

// HTML
<p id="hoge">要素だよ</p>

　 

// jQuery
$('#hoge').get(0).className.split(" ")[0];
// または
$('#hoge')[0].className.split(" ")[0];

className

javascriptで要素についたクラスの1つめだけ取り出したい時は

element.className.split(" ")[0];

jQueryを使ってる時は

$element.get(0).className.split(" ")[0];
// または
$element[0].className.split(" ")[0];

とすれば良いっぽい！

追記( 2014 11.11 )


最近のブラウザなら、element.classList[0]で取得できる っぽい！
※ 試してない