获取具有多个类的元素的特定类名

getting a specific class name of an element with multiple classes

本文关键字：元素 获取      更新时间：2023-09-26

假设我在我的html:

<div id="myDiv" class="a b-32"/>

我试图获得'b'类的索引(在我的例子'32')

我知道的唯一方法是:

var index;
var myDiv = $("#myDiv").attr("class");
var classes = myDiv.split(' ');
for(var i=0; i<classes.size(); i++){
    if(classes[i].matches((b-)+['d]*) ){
        index = classes[i].replace("b-","");
    }
}
alert(index);

是否有任何解决方案，不意味着迭代所有的类手动?因为我的解决方案看起来很无趣。肯定有更好的办法，只是我找不到。

你知道，尽管人们都说jQuery让你写的代码更少，但Vanilla JS出奇地擅长一行程序:p

alert((document.getElementById('myDiv').className
                                         .match(/(?:^| )b-('d+)/) || [0,0])[1]);

(为提高可读性增加了空白)

在myDiv没有b-number类的情况下返回0。

编辑:作为@A。沃尔夫在对你的问题的评论中指出，你不妨考虑一下:

<div id="myDiv" class="a" data-b="32"></div>

则可以得到:

alert(document.getElementById('myDiv').getAttribute("data-b"));

正则表达式可以提供帮助:

var index;
var myDivClasses = $("#myDiv").attr("class");
var cls = myDivClasses.match(/(?:^| )b-('d+)(?:$| )/);
if (cls) {
    index = cls[1];
}

(使用parseInt如果你想要一个数字。)

查找b-###，其中###是一个或多个数字，两侧有空格或边界(字符串的开始，字符串的结束)，并提取数字

相关文章：