使用 jQuery 获取类名

IT技术 javascript html jquery
2021-01-14 16:53:11

我想使用 jQuery 获取类名

如果它有一个 id

<div class="myclass"></div>
6个回答

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

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

应该做的伎俩。对于 ID 使用.attr('id').

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

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

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

RonnBlack:if(className.indexOf('Class_I_am_Looking_For') > = 0)也会匹配"This_Is_Not_the_Class_I_am_Looking_For"
2021-03-23 16:53:11
如果您利用.attr('class')并结合它,if(className.indexOf('Class_I_am_Looking_For') > = 0)您可以轻松检查特定类的存在并仍然处理多个类。
2021-03-27 16:53:11
正如sandino 在他的回答中指出的那样,总是有可能设置多个class名称。(例如 JQuery-UI 到处都添加了辅助类)。你总是可以使用 if(className.indexOf(' ') !== -1){throw new Error('Uh-oh! More than one class name!');}
2021-03-29 16:53:11
如果它是一个 ID var IDName = $('#id').attr('id');
2021-04-05 16:53:11
@BenRacicot 在这种情况下,只需使用标准 DOM 方法
2021-04-09 16:53:11

最好是使用.hasClass()时要检查元素是否具有特定class这是因为当一个元素有多个class时,检查起来并不容易。

例子:

<div id='test' class='main divhover'></div>

在哪里:

$('#test').attr('class');        // returns `main divhover`.

有了.hasClass()我们可以测试是否div有 class divhover

$('#test').hasClass('divhover'); // returns true
$('#test').hasClass('main');     // returns true
另一种方法是使用 .is('.divhover')
2021-03-16 16:53:11
是的,它只是做 $(element).attr("class").split(' '); 然后你得到一个列表,然后只使用 for 或 foreach 循环
2021-03-16 16:53:11
但是如果你知道类名怎么办?;-)
2021-03-18 16:53:11
是否可以遍历元素的类?
2021-03-21 16:53:11
没错......这只有在你知道你正在检查的类名时才有用......但我的评论是提醒你不要使用 .attr('class')=='CLASSNAME_YOU_ARE_SEARCHING' 来检查 dom 元素是否有一些类而不是更好地使用 .hasClass
2021-03-24 16:53:11

小心,也许,你有一个类和一个子类。

  <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 年更新

OR 可以在 2 行中使用 vanilla javascript 实现:

  const { classList } = document.querySelector('#id');
  document.querySelectorAll(`.${Array.from(classList).join('.')}`);
更正确的表达式是'.'+$('#id').attr('class').split(/[ \n\r\t\f]+/).join('.'),因为空格、制表符、LF、CR 和 FF可以用来分隔类。.split()也接受正则表达式。)
2021-03-13 16:53:11
'.'+$('#id').attr('class').split(/\s+/).join('.')会更简洁,不是吗?或者这会与我没有考虑的事情相匹配吗?
2021-03-19 16:53:11
class之间可能有多个空格。更正确的变体 var className = '.'+$('#id').attr('class').replace(/ +(?= )/g,'').split(' ').join('. ')
2021-03-30 16:53:11
为了安全起见并且不会得到任何尾随点,使用这些解决方案中的任何一个,添加这样的修剪 .attr('class').trim().split(...)
2021-03-30 16:53:11

这是使用 into 元素将第二个类放入多个类中

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

你可以简单地使用,

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