Question

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

<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>

我需要解析以clr开头的类名。因此，如果单击第二个元素，那么我需要获得clrtwo className。

Answer 1

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

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

Answer 2

以下是您的解决方案：

$('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]);
        }
    }
});

http://jsfiddle.net/vJfT7/

无论你怎么订购不同的课程。代码将提醒您一个类名，只有'clr'作为其中的子字符串。

最好的问候。

Answer 3

如果您不需要根据这些类找到元素（例如，执行$('.clrtwo')），那么将数据存储为data-clr属性会更好。这符合HTML5标准，jQuery使用.data()函数支持。

在这种情况下，我会以这种方式修改您的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>

然后我会使用这样的Javascript：

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

jsFiddle example

Answer 4

如果它始终是您感兴趣的第二个类名，您可以这样做：

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

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

http://jsfiddle.net/karim79/Z3qhW/

Answer 5

使用attribute selector获取类名为clr的人。

从那里：

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

如果您只有几个课程，后两个可能最适合翻译数组。

更新

我同意 lonesomeday ，使用data- *属性处理此类逻辑会好得多。使用CSS作为JavaScript钩子已经成为过去。

Answer 6

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

Answer 7

这应该jquery脚本应该做你所问的（在jsfiddle上测试）：

$(document).ready(function () {
    function getClrClass(elem) {
        var classes = elem.getAttribute('class').split(' ');
        var i = 0;
        var cssClass = '';

        for (i = 0; i < classes.length; i += 1) {
            if (classes[i].indexOf('clr') === 0) {
                cssClass = classes[i];
                i = classes.length; //exit for loop
            }
        }

        return cssClass;
    };
    $('article').click(function (e) {
        var cssClass = getClrClass($(this)[0]);
        alert(cssClass);
        e.preventDefault();
        return false;
    });
});

希望这有帮助。

皮特

Answer 8

http://jsfiddle.net/4KwWn/

$('article[class*=clr]').click(function() {
    var token = $(this).attr('class'),
        position = token.indexOf('clr');

    token = token.substring(position, token.indexOf(' ', position));

    alert(token);

});

jquery获取具有多个类的元素的某个类名

8 个答案:

更新