問題
複数設定したクラス（class）を切り分けて取得するには？
解決策
javascriptの「split」を使用する。
複数設定したクラス（class）を個々に取得したい。
クラスを複数設定した時、jQueryの「〇〇.attr(‘class’)」でクラス情報を取得しようとすると、全て（結果例：〇〇 〇〇 〇〇）取得してしまいます。
例：以下のテキストにはクラスとして「class01」「class02」「class03」を設定しています。
テキスト
出力結果 …
HTML
<div class="classview01">
<p class="class01 class02 class03">テキスト</p>
</div>
<div class="classview01_2">
<p class="text">出力結果 … <span class="outputs"></span></p>
</div>javascript：出力処理例
if($('.classview01').length){
// classの値を取得
var classview01 = $('.classview01 p').attr('class');
// 取得したclassの値を表示
$('.classview01_2 .outputs').html(classview01);
}これを防ぐため、各クラスを切り分けて配列に格納して取得する方法をご紹介します。
jQueryの構築：各クラスを切り分けて配列に格納して取得する記述例
出力例
再び、先程と同じクラス設定のタグの内容を出力してみます。
テキスト
出力結果 …
HTML
<div class="classview02">
<p class="class01 class02 class03">テキスト</p>
</div>
<div class="classview02_2">
<p class="text">出力結果 … <span class="outputs"></span></p>
</div>javascript：出力処理例
if($('.classview02').length){
// classの値を取得
var classview02 = $('.classview02 p').attr('class');
// 取得したclassの値を分割して配列化
var classlist = classview02.split(' ');
// 配列からforで各々の値を処理する
for (var i = 0; i < classlist.length; i++) {
if(i == 0){
$('.classview02_2 .outputs').html(classlist[i]+"、");
}else{
$('.classview02_2 .outputs').append(classlist[i]);
if(i < classlist.length - 1){
$('.classview02_2 .outputs').append("、");
}
}
}
}- 「split」で文字列を分割することで、各クラスを切り分けて配列に格納しています。
- クラスを複数設定する時は基本、半角スペースを空けて記述するため、半角スペース” “を基準に切り分けを行っています。
参考
【jQueryで複数指定のあるclassを取得する方法 | cly7796.net】
http://cly7796.net/wp/javascript/get-a-class-with-multiple-specifications-with-jquery/
【String.prototype.split() – JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/split
コメント