Chcę uzyskać nazwę klasy za pomocą jQuery

A jeśli ma identyfikator

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

Po uzyskaniu elementu jako obiektu jQuery za pomocą innych środków niż jego klasa

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

powinien załatwić sprawę. Do użycia identyfikatora .attr('id').

Jeśli znajdujesz się w module obsługi zdarzeń lub innej metodzie jQuery, w której elementem jest czysty węzeł DOM bez opakowania, możesz użyć:

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

Obie są standardowymi metodami DOM i są dobrze obsługiwane we wszystkich przeglądarkach.

Lepiej jest użyć, .hasClass()jeśli chcesz sprawdzić, czy element ma konkretny element class. Wynika to z faktu, że gdy element ma wiele class, sprawdzenie nie jest trywialne.

Przykład:

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

Gdzie:

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

Dzięki .hasClass()możemy sprawdzić, czy divma klasę divhover.

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

Bądź ostrożny. Być może masz klasę i podklasę.

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

Jeśli skorzystasz z poprzednich rozwiązań, będziesz mieć:

myclass mysubclass

Więc jeśli chcesz mieć selektor klasy , wykonaj następujące czynności:

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

i będziesz miał

.myclass.mysubclass

Teraz, jeśli chcesz wybrać wszystkie elementy, które mają tę samą klasę, takie jak div powyżej:

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

to znaczy

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

Aktualizacja 2018

LUB można zaimplementować za pomocą waniliowego javascript w 2 wierszach:

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

Ma to na celu przekształcenie drugiej klasy w wiele klas za pomocą elementu

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

możesz po prostu użyć,

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

Jeśli urządzenie <div>posiada id:

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

...możesz spróbować:

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

Jeśli masz <div>tylko jeden class, możesz spróbować:

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

Jeśli zamierzasz użyć funkcji podziału do wyodrębnienia nazw klas, będziesz musiał zrekompensować potencjalne warianty formatowania, które mogą dać nieoczekiwane wyniki. Na przykład:

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

produkuje

".myclass1..myclass2."

Myślę, że lepiej jest użyć wyrażenia regularnego, aby dopasować zestaw dopuszczalnych znaków dla nazw klas. Na przykład:

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

produkuje

["myclass1", "myclass2"]

Wyrażenie regularne prawdopodobnie nie jest kompletne, ale mam nadzieję, że rozumiesz mój punkt widzenia. Takie podejście ogranicza możliwość złego formatowania.

Aby wypełnić odpowiedź Whitestock (która jest najlepsza, jaką znalazłem), zrobiłem:

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

Tak więc dla „myclass1 myclass2” wynikiem będzie „.myclass1 .myclass2”

Nazwę klasy można uzyskać na dwa sposoby:

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

LUB

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

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

Z Javascriptem

document.getElementById('elem').className;

Z jQuery

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

LUB

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

Jeśli nie znasz nazwy klasy, ALE znasz identyfikator, możesz spróbować:

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

Następnie zadzwoń, używając:

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

Jeśli chcesz uzyskać klasy div, a następnie chcesz sprawdzić, czy istnieje jakaś klasa, skorzystaj z prostego użycia.

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

na przykład;

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

Spróbuj

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>

jeśli mamy pojedynczy lub chcemy pierwszego divelementu, którego możemy użyć

$('div')[0].classNamew przeciwnym razie potrzebujemy jednego idz tych elementów

Jeśli mamy kod:

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

aby przyjąć nazwę klasy za pomocą jQuery, możemy zdefiniować i użyć prostej metody wtyczki:

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

lub

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

Zastosowanie metody będzie następujące:

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

Musimy zauważyć, że zwróci listę klas w przeciwieństwie do metody macierzystej element.className, która zwraca tylko pierwszą klasę dołączonych klas. Ponieważ często element ma więcej niż jedną klasę, zaleca się, aby nie używać tej metody natywnej, ale element.classlist lub metodę opisaną powyżej.

Pierwszy wariant zwróci listę klas jako tablicę, drugi jako ciąg - nazwy klas oddzielone spacjami:

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

Inną ważną uwagą jest to, że zarówno metody, jak i metoda jQuery

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

zwraca tylko listę klas pierwszego elementu przechwyconego przez obiekt jQuery, jeśli użyjemy bardziej powszechnego selektora, który wskazuje wiele innych elementów. W takim przypadku musimy zaznaczyć element, chcemy uzyskać jego klasy, używając jakiegoś indeksu, np

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

To zależy również od tego, co musisz zrobić z tymi klasami. Jeśli chcesz po prostu sprawdzić klasę na liście klas elementu o tym identyfikatorze, powinieneś po prostu użyć metody „hasClass”:

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

jak wspomniano w komentarzach powyżej. Ale jeśli będziesz musiał wziąć wszystkie klasy jako selektor, użyj tego kodu:

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

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

Wynik będzie:

// .myClass.myClass2

i możesz to zrobić, aby dynamicznie utworzyć na przykład konkretną regułę przepisywania css.

pozdrowienia

To też działa.

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

Najlepszy sposób na uzyskanie nazwy klasy w javascript lub jquery

attr() funkcja atrybutu służy do pobierania i ustawiania atrybutu.

Zdobądź klasę

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

Sprawdź, czy klasa istnieje, czy nie

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
    }

Ustaw klasę

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

Uzyskaj klasę po kliknięciu przycisku za pomocą jQuery

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

Dodaj klasę, jeśli selektor nie ma żadnej klasy za pomocą jQuery

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

Podziel drugą klasę na wiele klas, używając elementu

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

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

użyj w ten sposób:

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

jeśli używałeś tej klasy więcej niż jeden raz, użyj każdego operatora

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