[js]jqueryで特定の要素のクラス名を取得する方法

今回は、jqueryで特定の要素のクラスを取得する方法をご紹介したいと思います。今その特定の要素がどういう状態にあるのかをクラスを決めていることが多いのではないでしょうか？今回はその状態がどんな状態で次どんな状態にしたいのかを決めるためにjqueryで特定の要素のクラスを取得する方法をご紹介したいと思います。

HTMLとcssを準備しよう

まずはhtmlで特定の要素が付いているクラス名を用意しましょう。

そこにちょっとしたcssでデザインをかけてみましょう

<style>
 #jquery_getclass_sample{
   padding-left:1em;
   padding-right:1em;
   padding-top:0.5em;
   padding-bottom:0.5em;
   text-align:center;
   border-radius:10px;
   border:1px solid #ccc;
   display:inline-block;
 }
</style>
<div id="jquery_getclass_sample" class="success">jqueryでクラスを取得します。取得したクラスは、</div>

上記のように、id =jquery_getclass_sampleに付いているsuccessというクラスを取得することを目的としてやってみましょう。

jqueryで特定の要素のクラス名を取得しよう

jqueryで特定の要素のクラスを取得してみようと思います。
また取得したクラスは名、divタグのテキスト文の中に入れてみようと思います。

<script>
 $(function(){
   var get_class;
   var get_text;
   var out_text;
   get_class=$('#jquery_getclass_sample').attr('class');
   get_text=$('#jquery_getclass_sample').text();
   $('#jquery_getclass_sample').text(get_text + get_class);
 });
</script>

jqueryでクラス名を取得したサンプル

上記のようにsuccessというクラス名を取得できていますね。

#jquery_getclass_sampleのクラスをattr(‘class’)で取得しています。
また、今回は、テキストの後ろに取得したクラス名をつけたいので、まず一度、#jquery_getclass_sampleのテキスト文を取得しておきます。
その後、その取得したテキスト文とクラス名が入っている変数を出力することで、テキスト文を変更しております。

まとめ

今回は、jqueryでクラス名を取得する方法をご紹介させていただきました。
このように取得することでその要素がどのクラスがついてるかわかりますね。例えばボタンがアクティブ状態なのか・・アコーディオンが展開されているのかどうかなど取得することができます。上手に活用して見ましょう。