Jquery get specific class of element

Question

I want to control some css rules for elements using class names, for example there could be one 'class parameter' like 'setwidth200', number after 'setwidth' could be any number. There would be no problem for me to make this if I would know that element could have only one class, but currently it could look like this:

<div class="main-client-block selector righted setwidth200"></div>

Is there any ways to get only specific class from list of element classes?

Having "number after 'setwidth' could be any number" is not a good way to use CSS (it will not use CSS, but just uses the class attribute as data storage). Use attributes, like `data-width="200"` etc instead if you want to adjust the width from code. — iCollect.it Ltd, Aug 27 '14 at 08:33
Ok, I will try to be more clear, I could find element with specific class, but later I need to slice number which is set in class name, point is - I don't know how to get this class name, because .attr('class') will return full list of classes. — Dazvolt, Aug 27 '14 at 08:34
`$element.data('width')` or `$element.attr('data-width')`. The `data-anything` attributes are for your use in HTML. — iCollect.it Ltd, Aug 27 '14 at 08:36
Otherwise use a RegEx on the `attr('class')` string to extract the value. — iCollect.it Ltd, Aug 27 '14 at 08:36
@TrueBlueAussie: he can also use `parseInt(classname, 10);` to get value from string — Milind Anantwar, Aug 27 '14 at 08:37
@Milind Anantwar: In an unknown class string, `parseInt` would be unreliable. e.g. what about `main-client-block selector2 righted setwidth200` — iCollect.it Ltd, Aug 27 '14 at 08:38
@TrueBlueAussie, Thank you very much, this is truly better than my idea, I will use that. — Dazvolt, Aug 27 '14 at 08:38
@TrueBlueAussie: that's true. but he is having the pattern here. so it should work i guess. — Milind Anantwar, Aug 27 '14 at 08:39
@Milind Anantwar: Note: I thought `parseInt` only extracts leading numbers: http://jsfiddle.net/tepww47u/1/ — iCollect.it Ltd, Aug 27 '14 at 09:08

score 1 · Answer 1 · answered Aug 27 '14 at 08:38

1

Yes it is. Just add id to your div and then:

<div id="someId" class="main-client-block selector righted setwidth200"></div>

var classes = jQuery('#someId').attr('class').split(' ');

And You will get the array of classes of the element. Then You can get any class. Also what You might want to do is check if array contains your "class" and then split it for attribute and value to apply styles.

But why don't You simply use css for this?

answered Aug 27 '14 at 08:38

patrykf

449
5
19

I could use css for that, but there is too much elements on page, and no grid for positioning, I'm tired of adding css-classes over and over again. Thank you for idea. – Dazvolt Aug 27 '14 at 08:43

score 1 · Answer 2 · answered Aug 27 '14 at 08:42

You can by looping through all the classes and check if something like setwidth is set. Something like this will do:

JavaScript:

$("div").each(function () {
    var check = "setwidth";
    var classes = $(this).attr("class").split(/\s+/);
    var width = 0;
    $.each(classes, function (index, item) {
        if (item.indexOf(check) === 0) 
            width = parseInt(item.substr(check.length), 10);
    });

    console.log(width);
});

FIDDLE

score 1 · Accepted Answer · answered Aug 27 '14 at 08:42

Moving comments to answer:

Having "number after 'setwidth' could be any number" is not a good way to use CSS (it will not use CSS, but just uses the class attribute as data storage).

Use attributes, like data-width="200" etc instead if you want to adjust/obtain a width value from code.

You can fetch them with .data (data prefix assumed) or .attr('data-...)`

var width = ~~$element.data('width');

or

var width = ~~$element.attr('data-width');

Note ~~ is a very quick way to convert a string to an integer.

Jquery get specific class of element

3 Answers3