jQueryを使用してクラス名を取得したい

そしてそれがIDを持っている場合

<div class="myclass"></div>

クラス以外の方法で要素をjQueryオブジェクトとして取得した後、

var className = $('#sidebar div:eq(14)').attr('class');

トリックを行う必要があります。ID用.attr('id')。

イベントハンドラーまたは他のjQueryメソッドの内部にいる場合、要素はラッパーのない純粋なDOMノードであり、以下を使用できます。

this.className // for classes, and
this.id // for IDs

どちらも標準のDOMメソッドであり、すべてのブラウザでサポートされています。

.hasClass()要素に特定のがあるかどうかを確認する場合に使用することをお勧めしますclass。これは、要素に複数のclassチェックするのは簡単ではないためです。

例：

<div id='test' class='main divhover'></div>

どこ：

$('#test').attr('class');        // returns `main divhover`.

で.hasClass()あれば、我々はテストすることができdiv、クラスを持っていますdivhover。

$('#test').hasClass('divhover'); // returns true
$('#test').hasClass('main');     // returns true

注意してください、おそらく、あなたはクラスとサブクラスを持っています。

  <div id='id' class='myclass mysubclass' >dfdfdfsdfds</div>

以前のソリューションを使用すると、次のようになります。

myclass mysubclass

したがって、クラスセレクターが必要な場合は、次のようにします。

var className = '.'+$('#id').attr('class').split(' ').join('.')

そしてあなたは

.myclass.mysubclass

ここで、上記のdivなど、同じクラスを持つすべての要素を選択する場合は、次のようにします。

   var brothers=$('.'+$('#id').attr('class').split(' ').join('.'))

つまり

var brothers=$('.myclass.mysubclass')

2018年の更新

または、2行のバニラJavaScriptで実装できます。

  const { classList } = document.querySelector('#id');
  document.querySelectorAll(`.${Array.from(classList).join('.')}`);

これは、要素を使用して2番目のクラスを複数のクラスに取得することです

var class_name = $('#videobuttonChange').attr('class').split(' ')[1];

簡単に使えます

var className = $('#id').attr('class');

あなた<div>が持っている場合id：

​<div id="test" class="my-custom-class"></div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

...あなたが試すことができます：

var yourClass = $("#test").prop("class");

に<div>しかない場合はclass、次の方法を試してください。

var yourClass = $(".my-custom-class").prop("class");

関数splitを使用してクラス名を抽出する場合は、予期しない結果をもたらす可能性のあるフォーマットのバリエーションの可能性を補正する必要があります。例えば：

" myclass1  myclass2 ".split(' ').join(".")

作り出す

".myclass1..myclass2."

正規表現を使用して、クラス名に使用できる一連の文字を照合したほうがよいと思います。例えば：

" myclass1  myclass2  ".match(/[\d\w-_]+/g);

作り出す

["myclass1", "myclass2"]

正規表現はおそらく完全ではありませんが、うまくいけば私のポイントを理解できます。このアプローチは、不十分なフォーマットの可能性を軽減します。

ホワイトストックの答えを完成させるために（これが私が見つけた最高のものです）、私はしました：

className = $(this).attr('class').match(/[\d\w-_]+/g);
className = '.' + className.join(' .');

したがって、「myclass1 myclass2」の場合、結果は「.myclass1 .myclass2」になります。

クラス名は2つの方法で取得できます。

var className = $('.myclass').attr('class');

または

var className = $('.myclass').prop('class');

<div id="elem" class="className"></div>

JavaScriptを使用

document.getElementById('elem').className;

jQueryを使用

$('#elem').attr('class');

または

$('#elem').get(0).className;

クラス名がわからない場合は、IDがわかっていれば、次のように試すことができます。

<div id="currentST" class="myclass"></div>

次に、次を使用して呼び出します：

alert($('#currentST').attr('class'));

divのクラスを取得し、クラスが存在するかどうかを確認する場合は、簡単に使用できます。

if ( $('#div-id' ).hasClass( 'classname' ) ) {
    // do something...
}

例えば;

if ( $('body').hasClass( 'home' ) ) {
    $('#menu-item-4').addClass('active');
}

それを試してみてください

HTML

<div class="class_area-1">
    area 1
</div>

<div class="class_area-2">
    area 2
</div>

<div class="class_area-3">
    area 3
</div>

jQuery

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="application/javascript">
    $('div').click(function(){
        alert($(this).attr('class'));
    });
</script>

単一のdiv要素がある場合、または使用できる最初の要素が必要な場合

$('div')[0].classNameそうでなければid、その要素の

コードがある場合：

<div id="myDiv" class="myClass myClass2"></div> 

jQueryを使用してクラス名を取得するには、単純なプラグインメソッドを定義して使用します。

$.fn.class = function(){
  return Array.prototype.slice.call( $(this)[0].classList );
}

または

 $.fn.class = function(){
   return $(this).prop('class');
 } 

メソッドの使用法は次のとおりです。

$('#myDiv').class();

アタッチされたクラスの最初のクラスのみを返すネイティブメソッドelement.classNameとは異なり、クラスのリストを返すことに注意する必要があります。要素には複数のクラスが関連付けられていることが多いため、このネイティブメソッドではなく、element.classlistまたは上記のメソッドを使用することをお勧めします。

最初のバリアントはクラスのリストを配列として返し、2番目は文字列として返します-スペースで区切られたクラス名：

// [myClass, myClass2]
// "myClass myClass2"

もう1つの重要な通知は、両方のメソッドとjQueryメソッド

$('div').prop('class');

他の多くの要素を指すより一般的なセレクターを使用する場合、jQueryオブジェクトによってキャッチされた最初の要素のクラスリストのみを返します。このような場合、要素にマークを付ける必要があります。たとえば、いくつかのインデックスを使用して、クラスを取得します。

$('div:eq(2)').prop('class');

これらのクラスをどのように処理する必要があるかにも依存します。このIDを持つ要素のクラスリストにクラスをチェックするだけの場合は、メソッド「hasClass」を使用する必要があります。

if($('#myDiv').hasClass('myClass')){
   // do something
}

上記のコメントで述べたように。ただし、すべてのクラスをセレクターとして取得する必要がある場合は、次のコードを使用します。

$.fn.classes = function(){
   var o = $(this);
   return o.prop('class')? [''].concat( o.prop('class').split(' ') ).join('.') : '';
 } 

 var mySelector = $('#myDiv').classes();

結果は次のようになります。

// .myClass.myClass2

たとえば、特定の書き換えcssルールを動的に作成することもできます。

よろしく

これも機能します。

const $el = $(".myclass");
const className = $el[0].className;

JavaScriptまたはjQueryでクラス名を取得する最良の方法

attr() 属性関数は、属性を取得および設定するために使用されます。

クラスを取得

jQuery('your selector').attr('class');  // Return class

クラスが存在するかどうかを確認します

The hasClass() method checks if any of the selected elements have a specified class name.

 if(jQuery('selector').hasClass('abc-class')){
        // Yes Exist
    }else{
        // NOt exists
    }

クラスを設定

jQuery('your selector').attr('class','myclass');  // It will add class to your selector

jQueryを使用してボタンのクリックでクラスを取得する

jQuery(document).on('click','button',function(){
     var myclass = jQuery('#selector').attr('class');
});

jQueryを使用してセレクターにクラスがない場合は、クラスを追加します

if ( $('#div-id' ).hasClass( 'classname' ) ) {
        // Add your code
    }

要素を使用して2番目のクラスを複数のクラスに取得します

Change array position in place of [1] to get particular class.

var mysecondclass = $('#mydiv').attr('class').split(' ')[1];

このように使用してください：

$(".myclass").css("color","red");

このクラスを複数回使用した場合は、各演算子を使用します

$(".myclass").each(function (index, value) {
//do you code
}