使用 jQuery 获取类名

Posted 2023-02-18

【中文标题】使用 jQuery 获取类名

【英文标题】：Get class name using jQuery

【发布时间】：2011-01-24 21:59:36

【问题描述】：

我想

如果它有一个 id

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

【问题讨论】：

@Amarghosh：没错，没错，但如果你使用一些遍历方法，比如parents()，你实际上可能会遇到这种情况。

fyi this.className 在没有 jquery 的情况下工作（将在上面的示例中返回 "myclass"）

【参考方案1】：

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

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

应该可以解决问题。对于 ID，请使用 .attr('id')。

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

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

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

【讨论】：

如果它是一个 ID var IDName = $('#id').attr('id');

正如 sandino 在他的回答中指出的那样，总是有可能设置多个类名。 （例如 JQuery-UI 在所有地方都添加了辅助类）。您可以随时使用if(className.indexOf(' ') !== -1)throw new Error('Uh-oh! More than one class name!');

进行检查

如果您利用.attr('class') 并将其与if(className.indexOf('Class_I_am_Looking_For') > = 0) 结合使用，您可以轻松检查特定类的存在并仍然处理多个类。

RonnBlack: if(className.indexOf('Class_I_am_Looking_For') > = 0) 也将匹配 "This_Is_Not_the_Class_I_am_Looking_For"

@BenRacicot 在这种情况下，只需使用standard DOM methods。

【参考方案2】：

当您想检查一个元素是否具有特定的class 时，最好使用.hasClass()。这是因为当一个元素有多个 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

【讨论】：

但是如果您不知道类名怎么办？ ;-)

没错...这仅在您知道要检查的类名时才有用...但我的评论是提醒您不要使用 .attr('class')=='CLASSNAME_YOU_ARE_SEARCHING'要检查 dom 元素是否有一些类，最好使用 .hasClass

另一种方式是使用.is('.divhover')

是否可以循环遍历元素的类？

是的，它只是做 $(element).attr("class").split(' ');你会得到一个列表，然后只需使用 for 或 foreach 循环

【参考方案3】：

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

  <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 可以用 vanilla javascript 在 2 行中实现：

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

【讨论】：

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

更正确的表达式是'.'+$('#id').attr('class').split(/[ \n\r\t\f]+/).join('.')，因为space, Tab, LF, CR and FF 允许分隔类。 （.split() 也接受正则表达式。）

'.'+$('#id').attr('class').split(/\s+/).join('.') 会更简洁，不是吗？或者这会符合我没有想到的事情吗？

为安全起见，不出现任何尾随点，使用这些解决方案中的任何一个，添加这样的修剪 .attr('class').trim().split(...)

【参考方案4】：

这是为了将第二个类放入多个类中使用一个元素

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

【参考方案5】：

你可以简单地使用，

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

【参考方案6】：

如果您的<div> 有一个id：

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

...你可以试试：

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

---

如果你的<div>只有class，你可以试试：

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

【参考方案7】：

如果您要使用 split 函数来提取类名，那么您将不得不补偿可能产生意外结果的潜在格式变化。例如：

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

生产

".myclass1..myclass2."

我认为你最好使用正则表达式来匹配类名的允许字符集。例如：

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

生产

["myclass1", "myclass2"]

正则表达式可能不完整，但希望您能理解我的意思。这种方法可以减少格式错误的可能性。

【参考方案8】：

为了完成 Whitestock 的回答（这是我找到的最好的），我做了：

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

所以对于 " myclass1 myclass2 "，结果将是 '.myclass1 .myclass2'

【参考方案9】：

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

使用 Javascript

document.getElementById('elem').className;

使用 jQuery

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

或

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

【参考方案10】：

你可以通过两种方式获取类名：

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

或

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

【参考方案11】：

如果你不知道类名但你知道 ID，你可以试试这个：

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

然后使用 :

调用它

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

【参考方案12】：

如果你想获取 div 的类，然后想检查是否存在任何类，那么简单使用。

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

例如;

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

【参考方案13】：

试试看

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>

【参考方案14】：

这也有效。

const $el = $(".myclass");
const className = $el[0].className;

【参考方案15】：

如果我们有单个或者我们想要第一个 div 元素，我们可以使用

$('div')[0].className 否则我们需要该元素的id

【参考方案16】：

在 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
    

---

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

Change array position in place of [1] to get particular class.

var mysecondclass = $('#mydiv').attr('class').split(' ')[1];

【参考方案17】：

如果我们有代码：

<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

如上面的 cmets 中所述。但是，如果您可能需要将所有类作为选择器，请使用以下代码：

$.fn.classes = function()
   var o = $(this);
   return o.prop('class')? [''].concat( o.prop('class').split(' ') ).join('.') : '';
  

 var mySelector = $('#myDiv').classes();

结果将是：

// .myClass.myClass2

例如，您可以让它动态创建特定的重写 css 规则。

问候

【参考方案18】：

直接方式

myid.className

console.log( myid.className )

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

【参考方案19】：

这样使用：-

$(".myclass").css("color","red");

如果你不止一次使用这个类，那么使用每个操作符

$(".myclass").each(function (index, value) 
//do you code