Voglio ottenere il nome della classe usando jQuery

E se ha un ID

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

Dopo aver ottenuto l'elemento come oggetto jQuery con mezzi diversi dalla sua classe, quindi

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

dovrebbe fare il trucco. Per l'uso dell'ID .attr('id').

Se ti trovi all'interno di un gestore eventi o di un altro metodo jQuery, in cui l'elemento è il nodo DOM puro senza wrapper, puoi utilizzare:

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

Entrambi sono metodi DOM standard e ben supportati in tutti i browser.

È meglio usare .hasClass()quando si desidera verificare se un elemento ha un particolare class. Questo perché quando un elemento ha multipli classnon è banale da controllare.

Esempio:

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

Dove:

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

Con .hasClass()possiamo verificare se divha la classe divhover.

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

Stai attento, forse, hai una classe e una sottoclasse.

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

Se usi soluzioni precedenti, avrai:

myclass mysubclass

Quindi se vuoi avere il selettore di classe , procedi come segue:

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

e tu avrai

.myclass.mysubclass

Ora se vuoi selezionare tutti gli elementi che hanno la stessa classe come div sopra:

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

questo significa

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

Aggiornamento 2018

O può essere implementato con javascript alla vaniglia in 2 righe:

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

Questo per ottenere la seconda classe in più classi usando in un elemento

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

puoi semplicemente usare,

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

Se hai <div>un id:

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

...Puoi provare:

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

Se hai <div>solo un class, puoi provare:

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

Se utilizzerai la funzione split per estrarre i nomi delle classi, dovrai compensare potenziali variazioni di formattazione che potrebbero produrre risultati imprevisti. Per esempio:

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

produce

".myclass1..myclass2."

Penso che stai meglio usando un'espressione regolare da abbinare a un set di caratteri consentiti per i nomi delle classi. Per esempio:

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

produce

["myclass1", "myclass2"]

L'espressione regolare probabilmente non è completa, ma spero che tu capisca il mio punto. Questo approccio mitiga la possibilità di una formattazione scadente.

Per completare la risposta di Whitestock (che è la migliore che ho trovato) ho fatto:

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

Quindi per "myclass1 myclass2" il risultato sarà '.myclass1 .myclass2'

Puoi ottenere il nome della classe in due modi:

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

O

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

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

Con Javascript

document.getElementById('elem').className;

Con jQuery

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

O

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

Se non conosci il nome della classe MA conosci l'ID puoi provare questo:

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

Quindi chiamalo usando:

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

Se si desidera ottenere classi di div e quindi verificare se esiste una classe, utilizzare semplicemente.

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

per esempio;

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

Provalo

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>

se abbiamo single o vogliamo il primo divelemento che possiamo usare

$('div')[0].classNamealtrimenti abbiamo bisogno di uno iddi quell'elemento

Se abbiamo un codice:

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

per prendere il nome della classe usando jQuery potremmo definire e usare un semplice metodo plugin:

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

o

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

L'uso del metodo sarà:

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

Dobbiamo notare che restituirà un elenco di classi a differenza del metodo nativo element.className che restituisce solo la prima classe delle classi associate. Poiché spesso all'elemento è associata più di una classe, ti consiglio di non utilizzare questo metodo nativo ma element.classlist o il metodo sopra descritto.

La prima variante restituirà un elenco di classi come una matrice, la seconda come stringa - nomi di classi separati da spazi:

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

Un altro avviso importante è che entrambi i metodi e il metodo jQuery

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

restituisce solo l'elenco di classi del primo elemento catturato dall'oggetto jQuery se utilizziamo un selettore più comune che punta a molti altri elementi. In tal caso, dobbiamo contrassegnare l'elemento, vogliamo ottenere le sue classi, usando un indice, ad es

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

Dipende anche da cosa devi fare con queste classi. Se vuoi solo cercare una classe nell'elenco delle classi dell'elemento con questo ID, dovresti semplicemente usare il metodo "hasClass":

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

come menzionato nei commenti sopra. Ma se potresti aver bisogno di prendere tutte le classi come selettore, usa questo codice:

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

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

Il risultato sarà:

// .myClass.myClass2

e potresti farlo per creare dinamicamente una specifica regola css di riscrittura per esempio.

Saluti

Anche questo funziona.

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

Il modo migliore per ottenere il nome della classe in javascript o jquery

attr() La funzione attributo viene utilizzata per ottenere e impostare l'attributo.

Ottieni lezione

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

Verifica che la classe esista o meno

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
    }

Imposta classe

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

Ottieni lezione al clic del pulsante usando jQuery

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

Aggiungi classe se il selettore non ha alcuna classe usando jQuery

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

Ottieni la seconda classe in più classi usando in un elemento

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

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

utilizzare in questo modo: -

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

se hai usato questa classe più di una volta, usa ciascun operatore

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