web-dev-qa-db-fra.com

Récupère le nom de la classe en utilisant jQuery

Je veux obtenir le nom de la classe en utilisant jQuery

Et s'il a un identifiant

<div class="myclass"></div>
javascriptjquery
571
X10nD

Après avoir obtenu l’élément en tant qu’objet jQuery par un autre moyen que sa classe,

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

devrait faire l'affaire. Pour l'ID, utilisez .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 supportées par tous les navigateurs.

1023
Boldewyn

Il est préférable d'utiliser .hasClass() lorsque vous souhaitez vérifier si un élément a une class particulière. En effet, lorsqu'un élément a plusieurs class, il n'est pas facile de vérifier.

Exemple:

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

Où:

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

Avec .hasClass(), nous pouvons tester si la div a la classe divhover.

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

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 voulez sélectionner tous les éléments ayant 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 mis en œuvre avec JavaScript javascript dans 2 lignes:

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

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

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

vous pouvez simplement utiliser,

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

16
Madura Harshana

Si votre <div> a une id:

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

...tu peux essayer:

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

Si votre <div> n'a qu'un class, vous pouvez essayer:

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

Si vous voulez utiliser la fonction de scission pour extraire les noms de classe, vous devrez alors compenser les variations de formatage potentielles susceptibles de 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 aux 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 les risques de mauvais formatage.

6
Whitestock

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

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

Donc pour "myclass1 myclass2" le résultat sera '. Myclass1 .myclass2'

6
Paul Leclercq
<div id="elem" class="className"></div>

Avec Javascript

document.getElementById('elem').className;

Avec jQuery

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

OR

$('#elem').get(0).className;
5
Bilal Iqbal

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

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

OR

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

Si vous voulez obtenir des classes de div et ensuite 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');
}
2
Aamer Shahzad

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

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

Puis appelez-le en utilisant:

alert($('#currentST').attr('class'));
2
Leroy Gumede

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>
2
Jay Zalavadiya

si nous avons un seul élément ou si nous voulons d’abord un élément div que nous pouvons utiliser

$('div')[0].className sinon nous avons besoin d'un id de cet élément

0
arunkumar talla

Meilleur moyen d'obtenir le nom de la classe en javascript ou jquery

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

Get Class

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

La classe de contrôle existe ou pas

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
    }

Classe du groupe

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

Obtenir la classe en cliquant sur le bouton en utilisant jQuery

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

Ajouter une classe si le sélecteur n'a aucune classe utilisant 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];
0
Mayank Dudakiya