我想使用jQuery获取类名。
如果它有一个id呢？
<div class="myclass"></div>
19个回答
1152
如果通过其他方式而不是其类名获取元素并将其作为jQuery对象获取后，那么
var className = $('#sidebar div:eq(14)').attr('class');
可以试试这个方法。对于ID使用.attr('id')。
如果你在事件处理程序或其他jQuery方法内部，元素是纯DOM节点而没有包装器，你可以使用：
this.className // for classes, and
this.id // for IDs
两者都是标准的DOM方法，在所有浏览器中都得到了良好的支持。
- Boldewyn
10
7如果这是一个ID，则变量IDName将获取元素的ID名称。代码翻译：通过jQuery获取元素的ID属性并将其存储在变量IDName中，前提是该元素确实具有ID属性。 - X10nD
19正如Sandino在他的回答中所指出的，往往存在多个类名被设置的情况（例如JQuery-UI在许多地方都添加了辅助类）。
您可以使用以下代码来检查这种情况：
if(className.indexOf(' ') !== -1){throw new Error('Uh-oh! More than one class name!');} - Potherca18如果你运用
.attr('class')并结合 if(className.indexOf('Class_I_am_Looking_For') >= 0)，就可以轻松检查特定类别是否存在，并且仍然能够处理多个类别。 - RonnBlack20RonnBlack说：如果(className.indexOf('Class_I_am_Looking_For') >= 0) ，也会匹配"This_Is_Not_the_Class_I_am_Looking_For"。 - Leif Neland
显示剩余5条评论
249
当您想要检查元素是否具有特定类时，最好使用.hasClass（）。这是因为当一个元素具有多个类时，检查不是微不足道的。
示例：
<div id='test' class='main divhover'></div>
何时使用：
$('#test').attr('class'); // returns `main divhover`.
使用 .hasClass() 我们可以测试 div 是否有类名为 divhover 的 class。
$('#test').hasClass('divhover'); // returns true
$('#test').hasClass('main'); // returns true
- sandino
5
13如果你不知道类名怎么办？;-) - Potherca
10没错，只有当你知道所要检查的类名时，使用.attr('class')=='CLASSNAME_YOU_ARE_SEARCHING' 才是有用的。但我的评论是为了提醒你不要使用这种方法来检查dom元素是否具有某些类，而是最好使用.hasClass。 - sandino
5另一种方法是使用
.is('.divhover')。 - orad能否循环遍历元素的类？ - Fractaliste
3没问题，只需运行 $(element).attr("class").split(' '); 即可获得列表，然后使用 for 或 foreach 循环即可。 - sandino
47
小心，也许你有一个类和一个子类。
<div id='id' class='myclass mysubclass' >dfdfdfsdfds</div>
如果你使用之前的解决方案，你将会拥有：
myclass mysubclass
所以如果你想要使用类选择器，请按照以下步骤：
var className = '.'+$('#id').attr('class').split(' ').join('.')
而且您将会拥有
.myclass.mysubclass
var brothers=$('.'+$('#id').attr('class').split(' ').join('.'))
那意味着
var brothers=$('.myclass.mysubclass')
更新2018
使用纯JavaScript可以在两行内实现OR：
const { classList } = document.querySelector('#id');
document.querySelectorAll(`.${Array.from(classList).join('.')}`);
- Abdennour TOUMI
4
6类之间可能有多个空格。更正确的变量 var className = '.'+$('#id').attr('class').replace(/ +(?= )/g,'').split(' ').join('.')。 - Suhan
3一种更加正确的表达方式是
'.'+$('#id').attr('class').split(/[ \n\r\t\f]+/).join('.')，因为空格、制表符、换行符、回车符和换页符可以用于分隔类名。（.split() 也接受正则表达式。） - Boldewyn“.”+ $（“＃id”）.attr（“class”）.split（/ \ s + /）。join（“。”）更加简洁，不是吗？或者那样会匹配我没有考虑到的东西吗？ - LostHisMind
1为了安全起见，以避免出现任何尾随点，在使用这些解决方案时，请添加一个修剪操作，如
.attr('class').trim().split(...)。 - Christian Lavallee31
使用into元素将第二类元素加入多个类别中
var class_name = $('#videobuttonChange').attr('class').split(' ')[1];
- Sankar
17
你可以通过以下方式来获取：
var className = $('#id').attr('class');
- Madura Harshana
12
如果你的
有一个id属性:
<div id="test" class="my-custom-class"></div>
您可以尝试：
var yourClass = $("#test").prop("class");
<div> 只有一个 class，你可以尝试使用以下代码：var yourClass = $(".my-custom-class").prop("class");
- mg1075
7
如果你想使用split函数来提取类名，那么你需要补偿可能产生意外结果的格式变化。例如：
" myclass1 myclass2 ".split(' ').join(".")
生成
".myclass1..myclass2."
我认为最好使用正则表达式匹配类名的允许字符集。例如：
" myclass1 myclass2 ".match(/[\d\w-_]+/g);
生成
["myclass1", "myclass2"]
正则表达式的可能并不完整，但是希望您能理解我的意思。这种方法可以减少格式上的差错。
- Whitestock
6
<div id="elem" class="className"></div>
使用Javascript
document.getElementById('elem').className;
使用jQuery
$('#elem').attr('class');
或者
$('#elem').get(0).className;
- Bilal Iqbal
6
为了完整回答Whitestock的问题（我认为这是最好的答案），我做了以下步骤：
className = $(this).attr('class').match(/[\d\w-_]+/g);
className = '.' + className.join(' .');
因此，对于 " myclass1 myclass2 "，结果将是'.myclass1 .myclass2'
- Paul Leclercq
5
有两种方式可以获取类名：
var className = $('.myclass').attr('class');
或者
var className = $('.myclass').prop('class');
- Sadikhasan
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
parents()，你实际上可能会遇到这种情况。 - Boldewyn