使用jQuery获取类名


603

我想使用jQuery获取类名

如果它有一个ID

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

2
@Amarghosh:是的,是的,但是,如果您使用诸如的遍历方法,您实际上可能会陷入这种情况parents()
Boldewyn

8
fyi this.className在没有jquery的情况下工作(将"myclass"在上面的示例中返回)
Peter Berg

Answers:


1062

通过除其类以外的其他方式将元素作为jQuery对象获取后,

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

应该可以。对于ID,请使用.attr('id')

如果您位于事件处理程序或其他jQuery方法中,而该元素是没有包装的纯DOM节点,则可以使用:

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

两者都是标准的DOM方法,并且在所有浏览器中都得到很好的支持。


7
并且如果它的ID是var IDName = $('#id')。attr('id');
X10nD

18
正如sandino在他的回答中指出的那样,总是有可能设置多个类名。(例如,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)2012年

18
罗恩·布莱克(RonnBlack):if(className.indexOf('Class_I_am_Looking_For') > = 0)也将参加比赛"This_Is_Not_the_Class_I_am_Looking_For"
莱夫·

1
在这种情况下,@BenRacicot只需使用标准的DOM方法
Boldewyn 2014年

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

10
没错...这仅在您知道要检查的类名时才有用...但是我的评论是警告您不要使用.attr('class')=='CLASSNAME_YOU_ARE_SEARCHING'检查dom元素是否包含某些类,最好使用.hasClass
sandino 2011年

4
另一种方法是使用.is('.divhover')
orad 2012年

是否可以遍历元素的类?
Fractaliste 2015年

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

或可以在2行中使用香草javascript实现:

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

6
类之间可能有多个空格。更正确的变体var className ='。'+ $('#id')。attr('class')。replace(/ +(?=)/ g,'')。split('').join('。 ')
Suhan 2013年

3
一个更正确的表达式是'.'+$('#id').attr('class').split(/[ \n\r\t\f]+/).join('.'),因为允许空格,Tab,LF,CR和FF分隔类。(.split()也接受RegExps。)
Boldewyn 2014年

'.'+$('#id').attr('class').split(/\s+/).join('.')会更简洁,不是吗?还是可以匹配我没有想到的东西?
LostHisMind

1
为了安全起见,不要留下任何拖尾点,请使用以下任何一种解决方案,例如: .attr('class').trim().split(...)
Christian Lavallee

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

您可以通过两种方式获取类Name:

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

要么

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


2

如果您不知道类名,但是知道ID,则可以尝试以下操作:

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

这还取决于您需要对这些类做什么。如果您只想在具有此id的元素的类列表中检查一个类,则应使用方法“ 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
}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.