読者です 読者をやめる 読者になる 読者になる

かもメモ

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

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];

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

が、ここでトラップです。
jQueryattrを使うと、
下のように要素にクラスが無い時にだと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]で取得できる っぽい!
※ 試してない