Question

让我说我的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);

是否有任何解决方案并不意味着手动迭代所有类？因为我的解决方案似乎很无聊。肯定有一个更好的方法，我找不到它。

Answer 1

你知道吗，因为所有人都声称jQuery使得你必须编写更少的代码，Vanilla JS出乎意料地擅长单行：p

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

（为了可读性添加了空白）

如果0没有myDiv类，则返回b-number。

编辑：正如@ A.Wolff在对您的问题的评论中指出的那样，您可能希望考虑这一点：

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

然后你可以得到：

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

Answer 2

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

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

（如果您想将其作为数字，请使用parseInt。）

查找b-###，其中###是一个或多个数字，两边都有空格或边界（字符串的开头，字符串的结尾），并提取数字。

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

2 个答案: