Получить имя класса с помощью jQuery

Ответ 1

После получения элемента как объекта jQuery другими средствами, чем его класс, тогда

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

должен сделать трюк. Для ID используйте .attr('id').

Если вы находитесь внутри обработчика события или другого метода jQuery, где этот элемент является чистым DOM node без оболочки, вы можете использовать:

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

Оба являются стандартными методами DOM и хорошо поддерживаются во всех браузерах.

Ответ 2

Лучше использовать .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

Ответ 3

Будьте осторожны. Возможно, у вас есть класс и подкласс.

  <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')

Ответ 4

Это означает, что второй класс используется в нескольких классах, используя элемент

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

Ответ 5

вы можете просто использовать

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

Ответ 6

Если ваш <div> имеет id:

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

... вы можете попробовать:

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

Если ваш <div> имеет только class, вы можете попробовать:

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

Ответ 7

Если вы собираетесь использовать функцию split для извлечения имен классов, тогда вам придется компенсировать возможные варианты форматирования, которые могут привести к неожиданным результатам. Например:

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

производит

".myclass1..myclass2."

Я думаю, что вам лучше использовать регулярное выражение для соответствия набора допустимых символов для имен классов. Например:

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

производит

["myclass1", "myclass2"]

Регулярное выражение, вероятно, не является полным, но, надеюсь, вы понимаете мою точку зрения. Этот подход смягчает возможность плохого форматирования.

Ответ 8

Чтобы закончить ответ Whitestock (это лучшее, что я нашел), я сделал:

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

Итак, для "myclass1 myclass2" результат будет . myclass1.myclass2 '

Ответ 9

Вы можете получить имя класса двумя способами:

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

ИЛИ

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

Ответ 10

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

С Javascript

document.getElementById('elem').className;

С jQuery

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

ИЛИ

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

Ответ 11

Если вы не знаете имя класса, НО вы знаете идентификатор, вы можете попробовать следующее:

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

Затем вызовите его, используя:

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

Ответ 12

если у нас есть один или мы хотим использовать первый элемент div, мы можем использовать

$('div')[0].className в противном случае нам понадобится id этого элемента

Ответ 13

Если вы хотите получить классы div, а затем хотите проверить, существует ли какой-либо класс, простое использование.

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

например,

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

Ответ 14

Попробуйте

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>