狼読

 

[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でクラス名を取得したサンプル

jqueryでクラスを取得します。取得したクラスは、

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

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

まとめ

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

Profile Card

お空をかけるプログラマー

空のどこか
常時低空飛行のwebプログラマー 徒然なるままに情報を発信します。

関連記事

Related Post

2020/05/01

[css]チェックボックスのチェック欄を消して、オリジナルのチェックボックスを作る方法

2021/06/13

【Mac】VirtualBox + Vagrant で仮想マシン上に開発環境を構築する方法

2020/05/31

[html]placeholderを使いこなしてinputに入力サンプルを入れてみよう

投稿カレンダー

2024年3月
 123
45678910
11121314151617
18192021222324
25262728293031

Technology

category

©狼読