Отримайте назву класу за допомогою jQuery


603

Я хочу отримати ім'я класу за допомогою jQuery

І якщо він має ідентифікатор

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

2
@Amarghosh: Це правда, правда, але ви могли насправді потрапити в цю ситуацію, якщо використовуєте такі способи обходу, як parents().
Болдевін

8
fyi this.classNameпрацює без jquery (повернемось "myclass"у наведеному вище прикладі)
Пітер Берг

Відповіді:


1062

Після отримання елемента як об'єкта jQuery за допомогою інших засобів, ніж його клас, тоді

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

повинен зробити трюк. Для використання ідентифікатора .attr('id').

Якщо ви знаходитесь в обробці подій або іншому методі jQuery, де елементом є чистий вузол DOM без обгортки, ви можете використовувати:

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

Обидва є стандартними методами DOM і добре підтримуються у всіх браузерах.


7
і якщо його ID ID IDName = $ ('# id'). attr ('id');
X10nD

18
Як зазначає Сандіно у своїй відповіді, завжди є шанс встановити більше одного імені класу. (наприклад, JQuery-UI додає допоміжні класи всюди). Ви завжди можете перевірити це за допомогою if(className.indexOf(' ') !== -1){throw new Error('Uh-oh! More than one class name!');}
Potherca

17
Якщо ви скористаєтеся .attr('class')і комбінуєте його, if(className.indexOf('Class_I_am_Looking_For') > = 0)ви можете легко перевірити наявність певного класу і все ще обробляти кілька класів.
RonnBlack

18
RonnBlack: if(className.indexOf('Class_I_am_Looking_For') > = 0)також буде матчу"This_Is_Not_the_Class_I_am_Looking_For"
Leif Neland

1
@BenRacicot у цьому випадку просто використовуйте стандартні методи DOM .
Boldewyn

227

Краще використовувати, .hasClass()коли ви хочете перевірити, чи є елемент певним class. Це тому, що коли елемент має кількаclass це не тривіально перевіряти.

Приклад:

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

Де:

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

З .hasClass()ми можемо перевірити , якщо divє клас divhover.

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

13
Але що робити, якщо ви не знаєте імені класу? ;-)
Potherca

10
це правильно ... це корисно лише, якщо ви знаєте, що ви перевіряєте ім'я класу ... але мій коментар був попереджати вас не використовувати .attr ('class') == 'CLASSNAME_YOU_ARE_SEARCHING', щоб перевірити, чи має елемент dom якийсь клас замість цього краще використовувати .hasClass
sandino

4
Ще один спосіб використання.is('.divhover')
orad

Чи можна перебирати класи класу елемента?
Fractaliste

3
Так, це просто зробити $ (element) .attr ("class"). Split (''); і ви отримаєте список, тоді просто використовуйте цикл for або foreach
sandino

38

Будьте обережні, можливо, у вас є клас і підклас.

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

Якщо ви використовуєте попередні рішення, у вас буде:

myclass mysubclass

Отже, якщо ви хочете мати селектор класу , зробіть наступне:

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

і у вас буде

.myclass.mysubclass

Тепер, якщо ви хочете вибрати всі елементи, що мають той самий клас, як, наприклад, div:

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

це означає

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

Оновлення 2018 року

АБО можна реалізувати за допомогою ванільного javascript у 2 рядках:

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

6
Між класами може бути більше одного простору. Більш правильний варіант var className = '.' + $ ('# Id'). Attr ('class'). Замінити (/ + (? =) / G, ''). Split ('') .join ('. ')
Сухан

3
Ще правильніше вираження полягає в '.'+$('#id').attr('class').split(/[ \n\r\t\f]+/).join('.')тому, що простір, Tab, LF, CR і FF дозволяється розділяти класи. ( .split()також приймає RegExps.)
Boldewyn

'.'+$('#id').attr('class').split(/\s+/).join('.')було б більш стисло, чи не так? Або це відповідало б чомусь, про що я не думаю?
LostHisMind

1
Щоб бути безпечним і не отримати жодної крапки, будь-яке з цих рішень додайте таку обробку.attr('class').trim().split(...)
Крістіан Лаваллі

28

Це для отримання другого класу на кілька класів, використовуючи елемент

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


11

Якщо у вас <div>є id:

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

...Ви можете спробувати:

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

Якщо у вас <div>є лише a class, ви можете спробувати:

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

6

Якщо ви збираєтеся використовувати функцію розділення для вилучення імен класів, тоді вам доведеться компенсувати потенційні зміни форматування, які можуть призвести до несподіваних результатів. Наприклад:

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

виробляє

".myclass1..myclass2."

Я думаю, вам краще використовувати звичайний вираз, щоб відповідати набору допустимих символів для імен класів. Наприклад:

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

виробляє

["myclass1", "myclass2"]

Регулярний вираз, мабуть, не повний, але, сподіваємось, ви зрозуміли мою думку. Такий підхід зменшує можливість поганого форматування.


6

Щоб виконати відповідь Уайтстока (що найкраще, що я знайшов), я зробив:

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

Отже для "myclass1 myclass2" результатом буде ".myclass1 .myclass2"


5

Ім'я класу можна отримати двома способами:

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

АБО

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

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

За допомогою Javascript

document.getElementById('elem').className;

З jQuery

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

АБО

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

2

Якщо ви не знаєте назви класу, Але ви знаєте ідентифікатор, ви можете спробувати це:

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

Потім зателефонуйте за допомогою:

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

2

Якщо ви хочете отримати класи div, а потім хочете перевірити, чи існує якийсь клас, то просте використання.

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

наприклад;

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

2

Спробуй це

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>

0

якщо у нас є одиночний або ми хочемо перший divелемент, який ми можемо використовувати

$('div')[0].classNameінакше нам потрібен idелемент


0

Якщо у нас є код:

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

щоб взяти ім'я класу за допомогою jQuery, ми могли б визначити і використовувати простий метод плагіна:

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

або

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

Використання методу буде:

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

Треба зауважити, що він поверне список класів на відміну від нативного методу element.className, який повертає лише перший клас доданих класів. Оскільки часто до цього елемента додається більше одного класу, я рекомендую не використовувати цей нативний метод, а element.classlist або описаний вище метод.

Перший варіант буде повертати список класів як масив, другий як рядок - назви класів, розділені пробілами:

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

Ще одне важливе зауваження - це обидва методи, а також метод jQuery

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

повернути лише список класів першого елемента, спійманого об’єктом jQuery, якщо ми використовуємо більш поширений селектор, який вказує на багато інших елементів. У такому випадку ми маємо позначити елемент, ми хочемо отримати його класи, використовуючи якийсь індекс, наприклад

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

Це також залежить, що вам потрібно робити з цими заняттями. Якщо ви хочете просто перевірити наявність класу в списку класів елемента з цим ідентифікатором, вам слід просто скористатися методом "hasClass":

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

як зазначено в коментарях вище. Але якщо вам потрібно взяти всі класи як вибір, тоді використовуйте цей код:

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

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

Результатом буде:

// .myClass.myClass2

і ви можете змусити його створити, наприклад, специфічне правило css для переписування, наприклад.

З повагою



-1

Найкращий спосіб отримати ім’я класу в JavaScript або jquery

attr() функція атрибута використовується для отримання та встановлення атрибута.


Отримайте клас

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

Перевірити наявність класу чи ні

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
    }

Установити клас

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

Отримайте клас при натисканні кнопки за допомогою jQuery

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

Додайте клас, якщо у селекторі немає жодного класу за допомогою jQuery

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

Отримайте другий клас на кілька класів, використовуючи елемент

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

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

-3

використовувати так: -

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

якщо ви використовували цей клас не один раз, тоді використовуйте кожного оператора

$(".myclass").each(function (index, value) {
//do you code
}
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.