Javascript jquery获取元素的特定类名，该元素分配了几个类

我需要读元素的类名。我有这样的元素：

<article class="active clrone moreclass">Article x</article>
<article class="active clrtwo moreclass">Article y</article>
<article class="active clrthree moreclass moreclass">Article z</article>
<article class="active clrone moreclass">Article xyza</article>

$("article").click(function() {
    var matches = this.className.match(/\bclr[^\s]+\b/);
    if (matches) {
        // matches[0] is clrone or clrtwo, etc...
    }
});

$('article.active').click(function() {
    console.log($(this).data('clr'));
});

第十条
第y条
第z条
第xyza条

---

我需要解析出以

clr

开头的类名。因此，如果单击了第二个元素，则需要获取

clrtwo

类名。

如果感兴趣的总是第二个类名，则可以执行以下操作：

$("article").click(function () {

    // split on the space and output the second element
    // in the resulting array
    console.log($(this)[0].className.split(" ")[1]);
});

---

您可以在单击项的类名上使用正则表达式匹配来查找以“clr”开头的类，如下所示：

<article class="active clrone moreclass">Article x</article>
<article class="active clrtwo moreclass">Article y</article>
<article class="active clrthree moreclass moreclass">Article z</article>
<article class="active clrone moreclass">Article xyza</article>

$("article").click(function() {
    var matches = this.className.match(/\bclr[^\s]+\b/);
    if (matches) {
        // matches[0] is clrone or clrtwo, etc...
    }
});

$('article.active').click(function() {
    console.log($(this).data('clr'));
});

使用获取具有包含

clr

的类名的类

从那里：

• 提取类名（字符串函数）
• 分析立场
• 确定下一个元素

如果您只有几个类，那么翻译数组可能最适合后两个

更新 我同意lonesomeday的观点，您最好使用data-*属性来处理这种逻辑。使用CSS作为JavaScript挂钩已经成为过去。

<script type="text/javascript">
jQuery(document).ready(function(){
  $("article").click(function(){
   alert($(this).attr('class').match(/\bclr[^\s]+\b/)[0]);
  });
});
</script>

jQuery（文档）.ready（函数（）{
$（“文章”）。单击（函数（）{
警报（$（this）.attr（'class'）.match（/\bclr[^\s]+\b/）[0]）；
});
});

这应该是jquery脚本应该按照您的要求执行的（在JSFIDLE上测试）：

$（文档）.ready（函数（）{
函数getClrClass（elem）{
var classes=elem.getAttribute（'class'）.split（''）；
var i=0；
var cssClass=''；
对于（i=0；i

希望这有帮助

Pete

如果不需要基于这些类查找元素（例如，执行

$（'.clrtwo'）

），则最好将数据存储为

数据clr

属性。这符合HTML5的标准，并且由jQuery使用函数支持

在本例中，我将以以下方式修改您的HTML：

<article class="active moreclass" data-clr="one">Article x</article>
<article class="active moreclass" data-clr="two">Article y</article>
<article class="active moreclass moreclass" data-clr="three">Article z</article>
<article class="active moreclass" data-clr="one">Article xyza</article>

---

以下是您的解决方案：

$('article').click(function () {
    var className = this.className.split(' ');
    for (var i = 0; i < className.length; i+=1) {
        if (className[i].indexOf('clr') >= 0) {
            alert(className[i]);
        }
    }
});

$（'article'）。单击（函数（）{
var className=this.className.split（“”）；
对于（变量i=0；i=0）{
警报（类名称[i]）；
}
}
});

不管你如何安排不同的课程。该代码将仅在类名称中有“clr”作为子字符串时向您发出警告

致以最诚挚的问候。

---

这听起来像是一项针对

data-*

attributes/的任务，从技术上来说，这是正确的，但对于更一般的情况来说，这太具体了。而且，这假设clrXXX始终处于特定位置，如果在操作过程中动态添加或删除任何类，则不一定安全。同意，正如答案中所述，“如果它始终是第二个类名”，这才是好的。