更新2018

Question

我想使用jQuery获取类名

如果它有id

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

Answer 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方法，并且在所有浏览器中都得到了很好的支持。

Answer 2

如果要检查元素是否具有特定.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

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

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

Answer 4

这是为了将第二个类用于元素

中的多个类

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

Answer 5

你可以简单地使用，

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

Answer 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");

Answer 7

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

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

产生

".myclass1..myclass2."

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

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

产生

["myclass1", "myclass2"]

正则表达式可能不完整，但希望你理解我的观点。这种方法减少了格式不佳的可能性。

Answer 8

完成Whitestock的答案（这是我发现的最好的答案）我做了：

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

所以＆＃34; myclass1 myclass2＆＃34; 结果将是＆＃39; .myclass1 .myclass2＆＃39;

Answer 9

您可以通过两种方式获取班级名称：

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

OR

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

Answer 10

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

使用Javascript

document.getElementById('elem').className;

使用jQuery

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

OR

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

Answer 11

如果你不知道班级名称但是你知道你可以试试这个ID：

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

然后使用：

调用它

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

Answer 12

试一试

<强> 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>

Answer 13

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

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

e.g;

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

Answer 14

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

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

Answer 15

在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];

Answer 16

这也可以。

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

Answer 17

直接通行

myid.className

console.log( myid.className )

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

Answer 18

如果我们有代码：

<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规则。

致谢

Answer 19

像这样使用：-

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

如果您已多次使用此类，请使用每个运算符

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

使用jQuery获取类名

19 个答案:

更新2018

直接通行