(好久没更新了。有同学在催更了,看完毕业班辣眼睛的论文,眼睛痛,写个博文,就当休息吧。T..T)
有时候,我们需要判断标签是否含有某个类,以便采取对应的操作,比如隐藏这些标签之类的。
有如下结构:
<div id="mydiv" class="header bar-top top-bar">
这个是个div
</div>
如何判断它是否含有类 “top”,注意不是找“bar-top”,也不是找“top-bar”,就是找类"top"。
方法一:利用正则去检测className的值
当然首先考虑正则啦。
let mydiv = document.getElementById("mydiv");
let re = /\btop\b/;
if( re.test(mydiv.className) ){
console.info("有类Top");
}else{
console.info("没有类top");
}
正则的含义就是判断有无单词“top”。很明显,div中没有top类,应该返回“没有类top”,妥妥的稳当!但是很快被事实打脸了~
WTF?
我到现在才发现正则的单词边界符,居然包含连接符(-)!!!
好嘛,为了避免这个尴尬。强烈建议写类名的时候,不要用连接符(-),不要用连接符(-),不要用连接符(-)~!!
以上的类名,可以用 top_bar 或者 topBar之类的方式替换。
但是,别人习惯了这么写,怎么办?
修改正则~!!把有连接符的情况排除掉。
let mydiv = document.getElementById("mydiv");
let re = /(?<!-)\btop\b(?!-)/;
if( re.test(mydiv.className) ){
console.info("有类Top");
}else{
console.info("没有类top");
}
这里解释下:
(?<!x) ,表示前面不包含字符x。 ?<! 就是“前面不包含”,需要写在()里。
(?!x),表示后面不包含字符x。 ?! “后面不包含”,需要写在()里。
By the way:
(?<=x) ,表示前面包含字符x。 ?<= 就是“前面包含”,需要写在()里。
(?=x),表示后面包含字符x。 ?= “后面包含”,需要写在()里。
方法二:利用标签的classList属性的方法contains()
突然发现标签的classList操作类,真的很方便~Nice~
contains()返回值为true,有类;返回false,没有类。
let mydiv = document.getElementById("mydiv");
if( mydiv.classList.contains("top") ){
console.info("有类Top");
}else{
console.info("没有类top");
}
方法三:jQuery的方法hasClass()
查找有无类的这种常见操作,jQuery早就封装好了方法hasClass()。
hasClass()返回值为true,有类;返回false,没有类。
if( $("#mydiv").hasClass("top") ){
console.info("有类Top");
}else{
console.info("没有类top");
}
jQuery真心强大,不过现在有被淘汰的趋势。毕竟,浏览器标准大统一的时代即将来临了。但是我相信“老兵不死”!