Je veux obtenir le nom de la classe en utilisant jQuery

Et s'il a un identifiant

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

Après avoir obtenu l'élément en tant qu'objet jQuery par d'autres moyens que sa classe,

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

devrait faire l'affaire. Pour l'utilisation de l'ID .attr('id').

Si vous êtes à l'intérieur d'un gestionnaire d'événements ou d'une autre méthode jQuery, où l'élément est le nœud DOM pur sans wrapper, vous pouvez utiliser:

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

Les deux sont des méthodes DOM standard et bien prises en charge dans tous les navigateurs.

Il est préférable de l'utiliser .hasClass()lorsque vous souhaitez vérifier si un élément a un particulier class. En effet, lorsqu'un élément en a plusieurs, classil n'est pas trivial de vérifier.

Exemple:

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

Où:

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

Avec .hasClass()nous pouvons tester si le diva la classe divhover.

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

Attention, vous avez peut-être une classe et une sous-classe.

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

Si vous utilisez des solutions précédentes, vous aurez:

myclass mysubclass

Donc, si vous voulez avoir le sélecteur de classe , procédez comme suit:

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

et vous aurez

.myclass.mysubclass

Maintenant, si vous souhaitez sélectionner tous les éléments qui ont la même classe tels que div ci-dessus:

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

cela signifie

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

Mise à jour 2018

OU peut être implémenté avec du vanilla javascript en 2 lignes:

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

C'est pour obtenir la deuxième classe en plusieurs classes en utilisant un élément

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

vous pouvez simplement utiliser,

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

Si vous avez <div>un id:

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

...tu peux essayer:

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

Si vous <div>n'en classavez qu'un , vous pouvez essayer:

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

Si vous allez utiliser la fonction de fractionnement pour extraire les noms de classe, vous devrez compenser les variations de formatage potentielles qui pourraient produire des résultats inattendus. Par exemple:

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

produit

".myclass1..myclass2."

Je pense que vous feriez mieux d'utiliser une expression régulière pour faire correspondre un ensemble de caractères autorisés pour les noms de classe. Par exemple:

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

produit

["myclass1", "myclass2"]

L'expression régulière n'est probablement pas complète, mais j'espère que vous comprenez mon point. Cette approche atténue la possibilité d'un mauvais formatage.

Pour compléter la réponse de Whitestock (qui est la meilleure que j'ai trouvée), j'ai fait:

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

Ainsi, pour "myclass1 myclass2", le résultat sera '.myclass1 .myclass2'

Vous pouvez obtenir le nom de classe de deux manières:

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

OU

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

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

Avec Javascript

document.getElementById('elem').className;

Avec jQuery

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

OU

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

Si vous ne connaissez pas le nom de la classe MAIS vous connaissez l'ID, vous pouvez essayer ceci:

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

Appelez-le ensuite en utilisant:

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

Si vous voulez obtenir des classes de div et que vous voulez vérifier si une classe existe, utilisez-la simplement.

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

par exemple;

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

Essayez-le

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>

si nous avons un seul divélément ou si nous voulons le premier élément, nous pouvons utiliser

$('div')[0].classNamesinon nous avons besoin d'un idde cet élément

Si nous avons un code:

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

pour prendre le nom de classe en utilisant jQuery, nous pourrions définir et utiliser une méthode de plugin simple:

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

ou

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

L'utilisation de la méthode sera:

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

Nous devons remarquer qu'il retournera une liste de classes contrairement à la méthode native element.className qui ne retourne que la première classe des classes attachées. Parce que souvent l'élément a plus d'une classe attachée, je vous recommande de ne pas utiliser cette méthode native mais element.classlist ou la méthode décrite ci-dessus.

La première variante renverra une liste de classes sous forme de tableau, la seconde sous forme de chaîne - noms de classe séparés par des espaces:

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

Un autre avis important est que les deux méthodes ainsi que la méthode jQuery

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

retourne uniquement la liste des classes du premier élément capturé par l'objet jQuery si nous utilisons un sélecteur plus commun qui pointe de nombreux autres éléments. Dans un tel cas, nous devons marquer l'élément, nous voulons obtenir ses classes, en utilisant un index, par exemple

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

Cela dépend aussi de ce que vous devez faire avec ces classes. Si vous souhaitez simplement rechercher une classe dans la liste des classes de l'élément avec cet identifiant, vous devez simplement utiliser la méthode "hasClass":

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

comme mentionné dans les commentaires ci-dessus. Mais si vous pouvez avoir besoin de prendre toutes les classes comme sélecteur, utilisez ce code:

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

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

Le résultat sera:

// .myClass.myClass2

et vous pourriez l'obtenir pour créer dynamiquement une règle css de réécriture spécifique par exemple.

Cordialement

Cela fonctionne aussi.

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

Meilleure façon d'obtenir le nom de la classe en javascript ou jquery

attr() La fonction d'attribut est utilisée pour obtenir et définir l'attribut.

Get Class

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

Vérifier que la classe existe ou non

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
    }

Définir la classe

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

Obtenir la classe en cliquant sur le bouton à l'aide de jQuery

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

Ajouter une classe si le sélecteur n'a aucune classe à l'aide de jQuery

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

Obtenez la deuxième classe en plusieurs classes en utilisant un élément

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

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

utiliser comme ceci: -

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

si vous avez utilisé cette classe plus d'une fois, utilisez chaque opérateur

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