Wie kann ich mit jQuery die aktuelle Klasse eines Div abrufen?

77

Wie kann ich mit jQuery die aktuelle Klasse eines Divs aufrufen div1?

Shyju
quelle

Antworten:

119

Holen Sie sich einfach das Klassenattribut:

var div1Class = $('#div1').attr('class');

Beispiel

<div id="div1" class="accordion accordion_active">

Um das obige div auf darin enthaltene Klassen zu überprüfen

var a = ("#div1").attr('class'); 
console.log(a);

Konsolenausgabe

accordion accordion_active
Christian C. Salvadó
quelle
ist das wirklich ein Attribut? className..? Wird nicht classNamenur für Javascript verwendet? document.getElementById("div1").className
Peirix
2
Ich habe jetzt gesehen, dass laut jQuery-Dokument die Verwendung empfohlen wird, classNamedamit das reservierte Wort classin Javascript nicht beeinträchtigt wird ...
Peirix
2
HINWEIS: In jQuery 1.6, sie schließlich die feste attrMethode, und Sie sollten jetzt verwenden $(...).attr('class');, classNameist nur eine Accessor - Eigenschaft, die auf die Karten classauf dem DOM - Elemente Attribut -es ist kein classNameAttribut, es ist nur ein Eigentums-.
Christian C. Salvadó
18

Einfach vorbei

var divClass = $("#div1").attr("class")

Sie können einige andere Dinge tun, um die Klasse des Elements zu manipulieren

$("#div1").addClass("foo"); // add class 'foo' to div1
$("#div1").removeClass("foo"); // remove class 'foo' from div1
$("#div1").toggleClass("foo"); // toggle class 'foo'
Jakub Arnold
quelle
13
$('#div1').attr('class')

gibt eine Zeichenfolge der Klassen zurück. Verwandeln Sie es in ein Array von Klassennamen

var classNames = $('#div1').attr('class').split(' ');
Russ Cam
quelle
3
+ 1'd. ($ ('# div1'). attr ('class') || '') .split ('') ist imo sicherer.
user420667
10

Von nun an ist es besser, die Funktion .prop () anstelle der Funktion .attr () zu verwenden.

Hier die jQuery-Dokumentation:

Ab jQuery 1.6 gibt die Methode .attr () für nicht festgelegte Attribute undefiniert zurück. Darüber hinaus sollte .attr () nicht für einfache Objekte, Arrays, das Fenster oder das Dokument verwendet werden. Verwenden Sie die Methode .prop (), um DOM-Eigenschaften abzurufen und zu ändern.

var div1Class = $('#div1').prop('class');
mt81
quelle
Es wurde seit 2.2 erneut geändert: Ab jQuery 1.12 / 2.2 wird [...] stattdessen das Klassenattribut verwendet. Daher kann .removeClass () für XML- oder SVG-Dokumente verwendet werden. (Quelle: api.jquery.com/removeClass )
Sandra
2
$("#div1").attr("class")
Tzury Bar Yochay
quelle
1
var classname=$('#div1').attr('class')
halocursed
quelle
1
var className=$('selector').attr('class');

oder

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

der Klassenname des aktuellen Elements

Aymen
quelle
1

Die addClass-Methode in jQuery verfügt über eine currentClassintegrierte Eigenschaft. Sie können es innerhalb eines Funktionsaufrufs verwenden. Wie so:

<div>First div</div>
<div class="red">Second div</div>
<div>Third div</div>
<div>Fourth div</div>

<script>
  $("div").addClass(function(index, currentClass) {
    var addedClass;
    if ( currentClass === "red" ) {
      addedClass = "green"; }
    return addedClass;
  });
</script>
Stefan Gruenwald
quelle
0

Versuche dies

$ ("# div1"). attr ("class")

Ravi
quelle
0
<div  id="my_id" class="my_class"></div>

Wenn das der erste Div ist, dann adressiere es so:

document.write("div CSS class: " + document.getElementsByTagName('div')[0].className);

Alternativ tun Sie dies:

document.write("alternative way: " + document.getElementById('my_id').className);

Es ergeben sich folgende Ergebnisse:

div CSS class: my_class
alternative way: my_class
Stefan Gruenwald
quelle
0

Wenn Sie nach einem Div suchen möchten, der mehr als eine Klasse hat, versuchen Sie Folgendes:

Html:

<div class="class1 class2 class3" id="myDiv">

Jquery:

var check = $( "#myDiv" ).hasClass( "class2" ).toString();

Ausgabe:

true

Badiparmagi
quelle