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

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

и если у него есть id 

<div class="myclass"></div>
538
javascript jquery

14 ответов

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

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

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

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

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

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

970

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

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

  <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

или может быть реализован с помощью vanilla javascript в 2 строках:

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

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

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

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

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

15

если <div> есть id:

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

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

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

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

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

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

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

производит

".myclass1..myclass2."

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

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

производит

["myclass1", "myclass2"]

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

6

для завершения Whitestock ответ (который я нашел) я сделал :

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

и "myclass1 myclass2" результат будет '.операция myclass1 .myclass2'

6

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

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;
5

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

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

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

alert($('#currentST').attr('class'));
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>
2

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

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

Эл.г;

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

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

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

0