jQuery获取有多个类别的元素中特定的类名

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类名。

- Primoz Rome

---

这听起来像是 data-* 属性的任务。 - lonesomeday

Answer 1

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

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

- jfriend00

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”子字符串，代码就会警告您类名。

最好的祝愿。

- Minko Gechev

Answer 3

如果您不需要基于这些类（例如执行$('.clrtwo')）查找元素，则最好将数据存储为data-clr属性。这符合HTML5的标准，并且可以使用.data()函数由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>

然后我会像这样使用Javascript：

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

jsFiddle 示例

- lonesomeday

Answer 4

使用 属性选择器 来获取包含类名 clr 的元素。

从这里开始：

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

如果只有几个类，则后面两个最好使用翻译数组来处理。

更新

我同意lonesomeday的观点，使用 data-* 属性来处理此类逻辑会更好。使用 CSS 作为 JavaScript 钩子已经过时了。

- Jason McCreary

Answer 5

如果您只关心第二个类名，可以这样做：

$("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/

- karim79

---

从技术上讲，这个问题的答案是正确的，但对于更一般的情况来说过于具体，不太有用。 - Anthony Grist

而且，这假设clrXXX始终处于特定位置，如果在操作期间动态添加或删除任何类，则不一定安全。 - jfriend00

同意，正如答案所述，这只适用于“如果它始终是第二个类名”。 - karim79

Answer 6

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

- Umesh Patil

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;
    });
});

希望这能有所帮助。

Pete

- pete

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

});

- Alex