我想用jQuery获取类名
如果它有id
<div class="myclass"></div>
如果我们有单个或我们想要第一个 div 元素我们可以使用
div
$('div')[0].className 否则我们需要该元素的 id
$('div')[0].className
id
小心,也许,你有一个类和一个子类 .
<div id='id' class='myclass mysubclass' >dfdfdfsdfds</div>
如果您使用以前的解决方案,您将拥有:
myclass mysubclass
因此,如果您想拥有 class selector ,请执行以下操作:
var className = '.'+$('#id').attr('class').split(' ').join('.')
你会的
.myclass.mysubclass
现在,如果要选择具有相同类的所有元素,例如上面的div:
var brothers=$('.'+$('#id').attr('class').split(' ').join('.'))
这意味着
var brothers=$('.myclass.mysubclass')
OR可以用2行中的vanilla javascript实现:
const { classList } = document.querySelector('#id'); document.querySelectorAll(`.${Array.from(classList).join('.')}`);
如果您要使用split函数来提取类名,那么您将不得不补偿可能产生意外结果的潜在格式变化 . 例如:
" myclass1 myclass2 ".split(' ').join(".")
产生
".myclass1..myclass2."
我认为你最好使用正则表达式来匹配类名允许的字符集 . 例如:
" myclass1 myclass2 ".match(/[\d\w-_]+/g);
["myclass1", "myclass2"]
正则表达式可能不完整,但希望您理解我的观点 . 这种方法减少了格式不良的可能性 .
为了完成Whitestock答案(这是我发现的最好的答案)我做了:
className = $(this).attr('class').match(/[\d\w-_]+/g); className = '.' + className.join(' .');
所以对于 " myclass1 myclass2 " ,结果将是 '.myclass1 .myclass2'
如果您不知道 class 名称,但您知道该ID,您可以尝试:
<div id="currentST" class="myclass"></div>
然后使用:
alert($('#currentST').attr('class'));
如果要检查元素是否具有特定的 class ,最好使用 .hasClass() . 这是因为当一个元素有多个 class 时,检查它并不容易 .
class
.hasClass()
Example:
<div id='test' class='main divhover'></div>
Where:
$('#test').attr('class'); // returns `main divhover`.
使用 .hasClass() ,我们可以测试 div 是否具有类 divhover .
divhover
$('#test').hasClass('divhover'); // returns true $('#test').hasClass('main'); // returns true
如果您的 <div> 有 id :
<div>
<div id="test" class="my-custom-class"></div>
...你可以试试:
var yourClass = $("#test").prop("class");
如果您的 <div> 只有 class ,您可以尝试:
var yourClass = $(".my-custom-class").prop("class");
你可以简单地使用,
var className = $('#id').attr('class');
您可以通过两种方式获取类名:
var className = $('.myclass').attr('class');
要么
var className = $('.myclass').prop('class');
如果你想获得div的类,然后想检查是否存在任何类,那么简单使用 .
if ( $('#div-id' ).hasClass( 'classname' ) ) { // do something... }
例如;
if ( $('body').hasClass( 'home' ) ) { $('#menu-item-4').addClass('active'); }
通过其他方式获取元素作为jQuery对象,然后
var className = $('#sidebar div:eq(14)').attr('class');
应该做的伎俩 . 对于ID,请使用 .attr('id') .
.attr('id')
如果您在事件处理程序或其他jQuery方法中,其中元素是没有包装器的纯DOM节点,则可以使用:
this.className // for classes, and this.id // for IDs
两者都是标准的DOM方法,并且在所有浏
这是为了将第二个类用于元素中的多个类
var class_name = $('#videobuttonChange').attr('class').split(' ')[1];
<div id="elem" class="className"></div>
用Javascript
document.getElementById('elem').className;
用jQuery
$('#elem').attr('class');
$('#elem').get(0).className;
Try it
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 回答
如果我们有单个或我们想要第一个
div
元素我们可以使用$('div')[0].className
否则我们需要该元素的id
小心,也许,你有一个类和一个子类 .
如果您使用以前的解决方案,您将拥有:
因此,如果您想拥有 class selector ,请执行以下操作:
你会的
现在,如果要选择具有相同类的所有元素,例如上面的div:
这意味着
更新2018年
OR可以用2行中的vanilla javascript实现:
如果您要使用split函数来提取类名,那么您将不得不补偿可能产生意外结果的潜在格式变化 . 例如:
产生
我认为你最好使用正则表达式来匹配类名允许的字符集 . 例如:
产生
正则表达式可能不完整,但希望您理解我的观点 . 这种方法减少了格式不良的可能性 .
为了完成Whitestock答案(这是我发现的最好的答案)我做了:
所以对于 " myclass1 myclass2 " ,结果将是 '.myclass1 .myclass2'
如果您不知道 class 名称,但您知道该ID,您可以尝试:
然后使用:
如果要检查元素是否具有特定的
class
,最好使用.hasClass()
. 这是因为当一个元素有多个class
时,检查它并不容易 .Example:
Where:
使用
.hasClass()
,我们可以测试div
是否具有类divhover
.如果您的
<div>
有id
:...你可以试试:
如果您的
<div>
只有class
,您可以尝试:你可以简单地使用,
var className = $('#id').attr('class');
您可以通过两种方式获取类名:
要么
如果你想获得div的类,然后想检查是否存在任何类,那么简单使用 .
例如;
通过其他方式获取元素作为jQuery对象,然后
应该做的伎俩 . 对于ID,请使用
.attr('id')
.如果您在事件处理程序或其他jQuery方法中,其中元素是没有包装器的纯DOM节点,则可以使用:
两者都是标准的DOM方法,并且在所有浏
这是为了将第二个类用于元素中的多个类
用Javascript
用jQuery
要么
Try it
HTML
jQuery