如何使用jQuery获取div的当前类?


77

使用jQuery,如何获取div的当前类div1

Answers:


119

只需获取class属性:

var div1Class = $('#div1').attr('class');

<div id="div1" class="accordion accordion_active">

要检查上面的div中包含的类

var a = ("#div1").attr('class'); 
console.log(a);

控制台输出

accordion accordion_active

这真的是一个属性吗?className..?是不是className仅用于JavaScript的?document.getElementById("div1").className
peirix

2
现在看到,根据jQuery文档,建议使用className它,以免干扰classjavascript中的保留字...
peirix

2
注意:在jQuery 1.6中,他们终于修复了该attr方法,您现在应该使用$(...).attr('class');className它只是一个访问器属性,它映射到classDOM元素上的属性-没有className属性,它只是一个属性-。
Christian C.Salvadó11年

18

只需通过

var divClass = $("#div1").attr("class")

您可以做一些其他的事情来操纵元素的类

$("#div1").addClass("foo"); // add class 'foo' to div1
$("#div1").removeClass("foo"); // remove class 'foo' from div1
$("#div1").toggleClass("foo"); // toggle class 'foo'

13
$('#div1').attr('class')

将返回一个字符串类。把它变成一个类名数组

var classNames = $('#div1').attr('class').split(' ');

3
+1。($('#div1')。attr('class')||'').split('')是更安全的imo。
user420667

10

从现在开始,最好使用.prop()函数而不是.attr()函数。

这里是jQuery文档:

从jQuery 1.6开始,.attr()方法为未设置的属性返回undefined。此外,.attr()不应在普通对象,数组,窗口或文档上使用。若要检索和更改DOM属性,请使用.prop()方法。

var div1Class = $('#div1').prop('class');

自2.2以来,它再次发生了变化: 从jQuery 1.12 / 2.2开始,使用class属性。因此,.removeClass()可以用于XML或SVG文档。(来源:api.jquery.com/removeClass
Sandra



1
var className=$('selector').attr('class');

要么

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

当前元素的类名


1

jQuery中的addClass方法具有currentClass内置属性。您可以在函数调用中使用它。像这样:

<div>First div</div>
<div class="red">Second div</div>
<div>Third div</div>
<div>Fourth div</div>

<script>
  $("div").addClass(function(index, currentClass) {
    var addedClass;
    if ( currentClass === "red" ) {
      addedClass = "green"; }
    return addedClass;
  });
</script>

0

试试这个

$(“#div1”)。attr(“ class”)


0
<div  id="my_id" class="my_class"></div>

如果那是第一个div,则按以下方式处理:

document.write("div CSS class: " + document.getElementsByTagName('div')[0].className);

或者执行以下操作:

document.write("alternative way: " + document.getElementById('my_id').className);

它产生以下结果:

div CSS class: my_class
alternative way: my_class

0

如果您要查找具有多个类的div,请尝试以下操作:

HTML:

<div class="class1 class2 class3" id="myDiv">

jQuery:

var check = $( "#myDiv" ).hasClass( "class2" ).toString();

输出:

true

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.