web-dev-qa-db-ja.com

要素から2番目のクラス名を取得する方法は？

クラス属性の2番目のクラス名を取得する方法を見つけようとしています。

たとえば、次のものがあります。

<div class="something fooBar"></div>

「fooBar」という名前の2番目のクラスを取得するにはどうすればよいですか？

特定のクラスを追加、削除、チェックできることは知っていますが、2番目のクラスを変数に取得する方法に関するドキュメントが見つかりませんでした。

jqueryclass
60
CyberJunkie

次のようにsplitを使用できます。

alert($('#divID').attr('class').split(' ')[1]);

すべてのクラスを取得するには、代わりにこれを行うことができます：

var classes = $('#divID').attr('class').split(' ');

for(var i=0; i<classes.length; i++){
  alert(classes[i]);
}

詳細：

112
Sarfraz
// alerts "8"
alert($('<div class="something 8"></div>').attr('class').split(' ')[1]);
11
Matt Ball

これは、div IDを参照して行う方法です。

$(document).ready( function () {
  alert($('#yourDivID').attr('class').split(' ')[1]);
});

Split関数を使用すると、指定した区切り文字で文字列を分割できます。これにより、分離された値の配列が返されます。この場合、クラス名の配列を返します。

他の文字列メソッドを分割するためのリファレンス http://www.javascriptkit.com/javatutors/string4.shtml

クラスにアクセスするには、次のjQueryセレクターと関数を調べる必要があります。

セレクター

http://api.jquery.com/class-selector/ 指定されたクラスを持つdom要素を選択します

http://api.jquery.com/has-selector/ 指定されたセレクターを持つdom要素を選択します

関数

http://api.jquery.com/addClass/ jQueryオブジェクトにクラスを追加するメソッド

http://api.jquery.com/removeClass/ jQueryオブジェクトのクラスを削除するメソッド

http://api.jquery.com/toggleClass/ クラスをjQueryオブジェクトに切り替えるメソッド

http://api.jquery.com/hasClass/ jQueryオブジェクトに指定されたクラスがあるかどうかを確認するメソッド

http://api.jquery.com/attr/ jQueryオブジェクトの属性を取得するメソッド

編集： 素敵なチートシート

enter image description here

11
John Hartsock

別の方法として、状態を追跡するためにdata- * html属性を使用することを常にお勧めします。たとえば、$（ "div.example"）。data（ "active"）

5
Yehia A.Salam

クラス属性の値を取得して、スペースで分割できます。

secondClass = element.className.split(' ')[1];
4
Christoffer Klang

これは正しくありません。クラスが複数のスペースを区切り、2番目のクラスを取得した場合、空になります。例：

<div class="something   fooBar"></div>
var classes = $('div').attr('class').split(' ');
alert('classes: ' + classes + '; length: ' + classes.length );
// classes: something,,,fooBar; 4

私は次のコードを使用します：

/*
 *   el  - element
 *   num - class number
 */
function getNumClass(el, num) {

  var classes = el.split(' ');
  var newclasses = [];
  var ret;

  for (var i = 0; i < classes.length; i++) {

    ret = $.trim(classes[i]);
    if(ret.length > 0) {
      newclasses.length += 1;
      newclasses[newclasses.length-1] = ret;
    }
  }

  if (num > newclasses.length) return false;

  return newclasses[num - 1];
}
0
skeef