JQuery получить определенное имя класса

У меня есть div с несколькими классами без определенного порядка.

<div class="whatever styledark myclass"></div>

Мне интересен класс styledark. Это может быть styledark, stylewhite, stylered.... Я хочу получить это имя класса независимо от того, какой цвет происходит после стиля слова. Вопрос в том, когда я нажимаю на div, как я предупреждаю это имя класса, которое начинается со словарного стиля, игнорируя другие классы в div. Классы не имеют определенного порядка.

Ответ 1

Это отличный вопрос. Хотя это можно сделать, используя многие из упомянутых здесь ответов, это немного неудобно и дорого стоит. То, как я бы рекомендовал вам это сделать, - это положить класс стиля последним, таким образом, только с одной строкой кода вы можете вывести имя класса, которое вы после.

$('element').attr('class').split(' ').pop();

Ответ 2

$('div').click(function() {
    var style = this.className.split(/\s/).filter(function( cn ) {
        return cn.indexOf('style') === 0;
    });

    alert(style);
});

Примечание. Этот код использует Array.prototype.filter и .indexof(), который недоступен в старых браузерах. Чтобы сделать это более общим, он будет выглядеть так:

$('div').click(function() {
    var name = '';

    $.each(this.className.split(/\s/), function( _, cn ) {
        if( cn.indexOf('style') === 0 ) { name = cn; return false; }
    });

    alert(name);
});

Ответ 3

Я использовал атрибут classList, но, к сожалению, кажется, что он не в сафари.:( Следующее - это то, что я придумал, но RegExp может потребоваться только небольшая настройка.

$('div.button').each(function() {
        $m =  this.className.match(/(^|\s)style\S+(\s|$)/);
    if($m) {
        $(this).bind('click', { colorName : $m[0] }, function(e) {
            alert(e.data.colorName);
        );
    }
});

Ответ 4

Найдено здесь: http://forum.jquery.com/topic/jquery-how-to-pick-out-classes-that-start-with-a-particular-string

var icons = ["Star", "Plus", "Left", "Right", "Up", "Down"];

$("div.button").each(function() {
    var $dv = $(this);
    $.each(icons, function() {
        if ($dv.hasClass("icon" + this)) {
            $dv.append('<img src="Images/' + this + '.gif" alt="" />');
            return false;
        }
    });
});

Ответ 5

$('div').click(function(){
    var c = $(this).attr('class').split(/\s+/);
    for(var s in c)
        if(c[s].indexOf('style') == 0)
            alert(c[s]);
});

живой пример: http://jsfiddle.net/gion_13/rXkNy/1/

Ответ 6

Предполагая, что у вас есть список имен классов в переменной, называемой "classes":

classes = classes.split(" ");
for (var i=0; i<classes.length; i++)
{
    var class = classes[i];
    if (class.indexOf("style") == 0)
    {
        alert(class);
    }
}

Ответ 7

$("div[class]").click(function(e){
    $.each(this.className.split(/\s/), function(i, val) {
        if (/^style/.test(val)) {
            alert(val.substr(5));
            return false;
        }
    });
});

Ответ 8

$('element').attr("class").split(" ").filter(getStyleClass);

function getStyleClass(value) {
    return value.indexOf("style") > -1;
}

И чтобы предупредить класс 'style' при щелчке, как вы указали:

$('element').click(function()[
    var style_class = $(this).attr("class").split(" ").filter(getStyleClass);
    alert(style_class);
}
// include the same getStyleClass from above

больше глубины:

$('element').attr("class").split(" ") - хороший старт - он помещает классы в массив, но .pop() просто удаляет последний элемент массива, и это не решает проблему.

.filter() - отличное решение, потому что вы можете написать небольшую функцию, которая решает, какие элементы вы хотите.

В нашем случае нам нужны только элементы массива, которые имеют "стиль". Мы можем использовать .indexOf(), чтобы определить, содержит ли строка "стиль": value.indexOf("style") > -1.