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

504

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

И если он имеет id

<div class="myclass"></div>
  • 2
    @Amarghosh: Верно, верно, но вы могли бы действительно попасть в эту ситуацию, если бы вы использовали некоторые методы обхода, такие как parents() .
  • 8
    fyi this.className работает без jquery (вернет "myclass" в примере выше)
Теги:

14 ответов

957
Лучший ответ

После получения элемента как объекта 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 и хорошо поддерживаются во всех браузерах.

  • 7
    и если его идентификатор var IDName = $ ('# id'). attr ('id');
  • 0
    Точно так же да ..
Показать ещё 10 комментариев
187

Лучше использовать .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
  • 11
    Но что, если вы не знаете имя класса? ;-)
  • 10
    это верно ... это полезно только если вы знаете имя класса, который вы проверяете ... но мой комментарий был предупреждать вас не использовать .attr ('class') == 'CLASSNAME_YOU_ARE_SEARCHING', чтобы проверить, есть ли у элемента dom какой-то вместо этого лучше использовать класс .hasClass
Показать ещё 3 комментария
30

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

  <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')
  • 6
    Между классами может быть более одного пробела. Более правильный вариант var className = '.' + $ ('# Id'). Attr ('class'). Replace (/ + (? =) / G, ''). Split ('') .join ('. «)
  • 3
    Еще более правильным выражением является '.'+$('#id').attr('class').split(/[ \n\r\t\f]+/).join('.') , Потому что пробел, Tab, LF, CR и FF разрешены для разделения классов. ( .split() также принимает RegExps.)
Показать ещё 2 комментария
24

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

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

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

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

7

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

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

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

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

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

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

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

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

производит

".myclass1..myclass2."

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

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

производит

["myclass1", "myclass2"]

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

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

С Javascript

document.getElementById('elem').className;

С jQuery

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

ИЛИ

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

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

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

ИЛИ

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

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

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

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

2

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

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

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

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

Попробуйте

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, а затем хотите проверить, существует ли какой-либо класс, простое использование.

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

например,

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

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

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню