我想使用jQuery获取类名
如果它有一个ID
<div class="myclass"></div>
this.className
在没有jquery的情况下工作(将"myclass"
在上面的示例中返回)
我想使用jQuery获取类名
如果它有一个ID
<div class="myclass"></div>
this.className
在没有jquery的情况下工作(将"myclass"
在上面的示例中返回)
Answers:
通过除其类以外的其他方式将元素作为jQuery对象获取后,
var className = $('#sidebar div:eq(14)').attr('class');
应该可以。对于ID,请使用.attr('id')
。
如果您位于事件处理程序或其他jQuery方法中,而该元素是没有包装的纯DOM节点,则可以使用:
this.className // for classes, and
this.id // for IDs
两者都是标准的DOM方法,并且在所有浏览器中都得到很好的支持。
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)
可以轻松检查特定类的存在,并且仍然可以处理多个类。
if(className.indexOf('Class_I_am_Looking_For') > = 0)
也将参加比赛"This_Is_Not_the_Class_I_am_Looking_For"
.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
.is('.divhover')
小心一点,也许您有一个类和一个子类。
<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')
或可以在2行中使用香草javascript实现:
const { classList } = document.querySelector('#id');
document.querySelectorAll(`.${Array.from(classList).join('.')}`);
'.'+$('#id').attr('class').split(/[ \n\r\t\f]+/).join('.')
,因为允许空格,Tab,LF,CR和FF分隔类。(.split()
也接受RegExps。)
'.'+$('#id').attr('class').split(/\s+/).join('.')
会更简洁,不是吗?还是可以匹配我没有想到的东西?
.attr('class').trim().split(...)
您可以简单地使用,
var className = $('#id').attr('class');
<div id="elem" class="className"></div>
使用Javascript
document.getElementById('elem').className;
使用jQuery
$('#elem').attr('class');
要么
$('#elem').get(0).className;
如果您不知道类名,但是知道ID,则可以尝试以下操作:
<div id="currentST" class="myclass"></div>
然后使用以下命令调用它:
alert($('#currentST').attr('class'));
如果要获取div的类,然后要检查是否存在任何类,则可以简单使用。
if ( $('#div-id' ).hasClass( 'classname' ) ) {
// do something...
}
例如;
if ( $('body').hasClass( 'home' ) ) {
$('#menu-item-4').addClass('active');
}
尝试一下
的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>
如果我们有一个代码:
<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规则。
问候
这也可以。
const $el = $(".myclass");
const className = $el[0].className;
在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];
像这样使用:
$(".myclass").css("color","red");
如果您多次使用此类,请使用每个运算符
$(".myclass").each(function (index, value) {
//do you code
}
parents()
。