jquery获取指定了几个类的元素的特定类名

jquery get certain class name of element which has several classes assigned

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

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

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

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

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

以下是您的解决方案：

$('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"作为子字符串。

致以最良好的问候。

如果不需要基于这些类查找元素（例如执行$('.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示例

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

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

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

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

使用属性选择器来获取那些具有包含clr的类名的属性。

从那里：

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

如果您只有几个类，那么后两者可能最好由翻译数组提供。

更新

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

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);
});
相关文章：