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

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

使用屬性選擇器來獲取具有包含clr類名的那些。

從那里：

• 提取類名（字符串函數）
• 分析立場
• 確定下一個元素

如果您只有幾個類，則后兩個可能最好由翻譯數組提供。

UPDATE

我同意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);

});