Ich möchte den Klassennamen mit jQuery erhalten

Und wenn es eine ID hat

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

Nachdem Sie das Element über andere Mittel als seine Klasse als jQuery-Objekt erhalten haben, dann

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

sollte den Trick machen. Für die ID verwenden .attr('id').

Wenn Sie sich in einem Ereignishandler oder einer anderen jQuery-Methode befinden, bei der das Element der reine DOM-Knoten ohne Wrapper ist, können Sie Folgendes verwenden:

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

Beide sind Standard-DOM-Methoden und werden in allen Browsern gut unterstützt.

Es ist besser zu verwenden, .hasClass()wenn Sie überprüfen möchten, ob ein Element ein bestimmtes hat class. Dies liegt daran class, dass die Überprüfung eines Elements nicht trivial ist.

Beispiel:

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

Wo:

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

Mit können .hasClass()wir testen, ob der divdie Klasse hat divhover.

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

Seien Sie vorsichtig, vielleicht haben Sie eine Klasse und eine Unterklasse.

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

Wenn Sie frühere Lösungen verwenden, haben Sie:

myclass mysubclass

Wenn Sie also die Klassenauswahl haben möchten , gehen Sie wie folgt vor:

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

und du wirst haben

.myclass.mysubclass

Wenn Sie nun alle Elemente auswählen möchten, die dieselbe Klasse haben, wie z. B. div oben:

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

das bedeutet

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

Update 2018

OR kann mit Vanille-Javascript in 2 Zeilen implementiert werden:

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

Dies dient dazu, die zweite Klasse mithilfe eines Elements in mehrere Klassen zu unterteilen

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

Sie können einfach verwenden,

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

Wenn Sie <div>eine haben id:

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

...Du kannst es versuchen:

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

Wenn Sie <div>nur eine haben class, können Sie versuchen:

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

Wenn Sie die Split-Funktion verwenden, um die Klassennamen zu extrahieren, müssen Sie mögliche Formatierungsschwankungen ausgleichen, die zu unerwarteten Ergebnissen führen können. Zum Beispiel:

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

produziert

".myclass1..myclass2."

Ich denke, Sie sind besser dran, einen regulären Ausdruck zu verwenden, um eine Reihe zulässiger Zeichen für Klassennamen abzugleichen. Zum Beispiel:

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

produziert

["myclass1", "myclass2"]

Der reguläre Ausdruck ist wahrscheinlich nicht vollständig, aber hoffentlich verstehen Sie meinen Standpunkt. Dieser Ansatz verringert die Möglichkeit einer schlechten Formatierung.

Um die Whitestock-Antwort zu vervollständigen (die beste, die ich gefunden habe), habe ich Folgendes getan:

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

Für "myclass1 myclass2" lautet das Ergebnis ".myclass1 .myclass2".

Sie können den Klassennamen auf zwei Arten erhalten:

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

ODER

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

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

Mit Javascript

document.getElementById('elem').className;

Mit jQuery

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

ODER

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

Wenn Sie den Klassennamen nicht kennen, aber die ID kennen, können Sie dies versuchen:

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

Dann nenne es mit:

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

Wenn Sie Klassen von div erhalten möchten und dann überprüfen möchten, ob eine Klasse vorhanden ist, verwenden Sie diese einfach.

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

z.B;

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

Versuch es

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>

Wenn wir ein einzelnes divElement haben oder das erste Element möchten , können wir es verwenden

$('div')[0].classNamesonst brauchen wir eines idvon diesem Element

Wenn wir einen Code haben:

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

Um den Klassennamen mit jQuery zu übernehmen, können wir eine einfache Plugin-Methode definieren und verwenden:

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

oder

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

Die Verwendung der Methode wird sein:

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

Wir müssen beachten, dass im Gegensatz zur nativen Methode element.className eine Liste von Klassen zurückgegeben wird, die nur die erste Klasse der angehängten Klassen zurückgibt. Da dem Element häufig mehr als eine Klasse zugeordnet ist, empfehle ich, nicht diese native Methode, sondern element.classlist oder die oben beschriebene Methode zu verwenden.

Die erste Variante gibt eine Liste von Klassen als Array zurück, die zweite als Zeichenfolge - Klassennamen, die durch Leerzeichen getrennt sind:

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

Ein weiterer wichtiger Hinweis ist, dass sowohl die Methode als auch die jQuery-Methode

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

Gibt nur die Klassenliste des ersten Elements zurück, das vom jQuery-Objekt erfasst wurde, wenn wir einen allgemeineren Selektor verwenden, der auf viele andere Elemente verweist. In einem solchen Fall müssen wir das Element markieren, wir möchten seine Klassen erhalten, indem wir einen Index verwenden, z

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

Es hängt auch davon ab, was Sie mit diesen Klassen tun müssen. Wenn Sie nur nach einer Klasse in der Klassenliste des Elements mit dieser ID suchen möchten, sollten Sie einfach die Methode "hasClass" verwenden:

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

wie in den Kommentaren oben erwähnt. Wenn Sie jedoch möglicherweise alle Klassen als Selektor verwenden müssen, verwenden Sie diesen Code:

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

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

Das Ergebnis wird sein:

// .myClass.myClass2

und Sie könnten es zum Beispiel dazu bringen, dynamisch eine bestimmte CSS-Regel zum Umschreiben zu erstellen.

Grüße

Das funktioniert auch.

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

Der beste Weg, um Klassennamen in Javascript oder JQuery zu erhalten

attr() Die Attributfunktion wird verwendet, um Attribute abzurufen und festzulegen.

Holen Sie sich Klasse

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

Überprüfen Sie, ob eine Klasse vorhanden ist oder nicht

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
    }

Klasse einstellen

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

Klasse mit Klick auf die Schaltfläche mit jQuery abrufen

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

Klasse hinzufügen, wenn der Selektor mit jQuery keine Klasse hat

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

Holen Sie sich die zweite Klasse in mehrere Klassen mit einem Element

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

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

Verwendung wie folgt: -

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

Wenn Sie diese Klasse mehrmals verwendet haben, verwenden Sie jeden Operator

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