jQuery check .hasClass('[class*="myclass-"]');

Question

I have a series classes start myclass, like myclass-s1, myclass-b10, myclass-ss1 etc. Does jQuery hasClass check if class name start 'myclass-' ?

score 4 · Accepted Answer · answered Apr 22 '14 at 04:56

4

You can use is method

if($('div').is('[class^=myclass]')){
//do your stuff here
}

answered Apr 22 '14 at 04:56

Bhojendra Rauniyar

78,842
31
152
211

score 3 · Answer 2 · answered Apr 22 '14 at 04:59

3

Or you can use plain javascript:

 /\bmyclass-.+\b/.test(element.className)

answered Apr 22 '14 at 04:59

dfsq

187,712
24
229
250

1

Or .matches , which is effectively 'vanilla' 'is' – Benjamin Gruenbaum Apr 22 '14 at 05:00
This is actually the most accurate solution. While possible, it's difficult to represent a class name prefix using attribute selectors given the nature of the `class` attribute. – BoltClock Apr 22 '14 at 05:01
@Sani Huttunen: True, I was speaking in the context of this question alone. Here's a solution using attribute selectors as opposed to `className` matching: http://stackoverflow.com/questions/4524412/jquery-selector-to-target-any-class-name-of-multiple-present-starting-with-a-p/4524477#4524477 – BoltClock Apr 22 '14 at 05:12

score 1 · Answer 3 · answered Apr 22 '14 at 05:01

1

You can just use straight JavaScript for this:

if ( myElement.className.match(/\bmyclass-.*/) ) {
    // do stuff
}

or

if ( $(mySelector).attr("class").match(/\bmyclass-.*/) ) {
    // do stuff
}

answered Apr 22 '14 at 05:01

Joel Cornett

23,166
9
59
85

score 0 · Answer 4 · answered Apr 22 '14 at 05:57

You could use below code if you want to check if class namme starts with...
You want to check the classes that starts with myclass- ,so it would give you the number of occurrence according to your input in the alert. According to this the output is 2.

<div class="myclass-s1"></div>
<div class="myclass-b10"></div>
<div class="myclassb10"></div>

$.expr[':'].hasClassStartingWithInput = function(obj){
return ((/\bmyclass-/).test(obj.className)); //here is the input(myclass-)that you need to give
 };

 alert($('div:hasClassStartingWithInput').length);

jQuery check .hasClass('[class*="myclass-"]');

4 Answers4