CODEWITHSUNDEEP
javascriptjqueryclass
Pinkie
Pinkie

Reputation: 10256

jQuery get specific class name

I have a div with few classes in no specific order. 

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

I'm interested in the styledark class. This can be styledark, stylewhite, stylered.... I want to get this class name no matter what color comes after the word style. The question is, when i click on the div, how i do i alert this class name that start with the word style disregarding other classes in the div. The classes are in no specific order.

Upvotes: 19

Views: 22851

Answers (8)

Travis Heeter
Travis Heeter

Reputation: 14084

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

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

And to alert the 'style' class on a click, as you specified:

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

more depth:

$('element').attr("class").split(" ") is a good start - it puts the classes in an array, but .pop() simply removes the last element of the array, and that does not solve the problem.

.filter() is a great solution because you can write a small function that decides which elements you want.

In our case we only want elements of the array that have 'style'. We can use .indexOf() to decide if the string contains "style" like this: value.indexOf("style") > -1.

Upvotes: 1

gion_13
gion_13

Reputation: 41533

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

live example : http://jsfiddle.net/gion_13/rXkNy/1/

Upvotes: 3

Kyle
Kyle

Reputation: 564

I used to use the classList attribute, but unfortunately it seems that it's not in safari. :( The following is what I came up with, but the RegExp may need just a little tweaking.

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

Upvotes: 3

Hussein
Hussein

Reputation: 42818

This is a great question. Although it can be done using many of the answers mentioned here, this is a little awkward and costly performance wise. The way i would recommend you do it is put the style class last, that way with only one line of code you can output the class name you are after.

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

Upvotes: 18

jAndy
jAndy

Reputation: 236192

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

    alert(style);
});

Note this code uses Array.prototype.filter and .indexof(), which is not available in old'ish browsers. To make this more generic, it would look like:

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

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

    alert(name);
});

Upvotes: 5

roberkules
roberkules

Reputation: 6605

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

Upvotes: 1

Kon
Kon

Reputation: 27451

Found here: 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;
        }
    });
});

Upvotes: 2

Zach
Zach

Reputation: 7940

Assuming you have the list of class names in a variable called "classes":

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

Upvotes: 1

Related Questions