Получить имя класса с помощью 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
и если его идентификатор var 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"
Лейф Неланд

1
@BenRacicot в этом случае просто используйте стандартные методы DOM .
Болдевин

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

Можно ли зациклить классы элемента?
Фракталист

3
Да, это просто сделать $ (элемент) .attr ("класс"). 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'). Replace (/ + (? =) / G, ''). Split ('') .join ('. ')
Сухан

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

'.'+$('#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>есть только один class, вы можете попробовать:

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

6

Если вы собираетесь использовать функцию 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»


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.