Is it possible and how do I use hasClass() so that I can search for classes that start with some specified string?
I want to look at multiple classes to see if there exists at least one class that starts with a string.

string: "old"

Is this possible and are you also able to do contains or wildcard searching?

Is it possible and how do I use hasClass() so that I can search for classes that start with some specified string?
I want to look at multiple classes to see if there exists at least one class that starts with a string.

string: "old"

Is this possible and are you also able to do contains or wildcard searching?

• javascript
• jquery
• css

Share Improve this question Follow edited Jul 21, 2016 at 17:03 agent provocateur asked Jul 21, 2016 at 0:07 agent provocateuragent provocateur 83044 gold badges2020 silver badges4040 bronze badges 10

• Provide what you have done... – Jonas Wilms Commented Jul 21, 2016 at 0:09
• document.getElementsByClassName("old"); ... – Jonas Wilms Commented Jul 21, 2016 at 0:10
• sounds like a better solution is to use multiple classes so you do not have to look at partials. but you can use an attribute selector, but there is no looking for each individual class name and see what it starts. – epascarello Commented Jul 21, 2016 at 0:12
• like $("*[class*='mystring']") – yaakov Commented Jul 21, 2016 at 0:13
• @epascarello i need to look at partials because i am using multiple classes with prefixes – agent provocateur Commented Jul 21, 2016 at 16:42

 |  Show 5 more ments

2 Answers 2

Sorted by: Reset to default 6

selector will be : [class^=old]

Thus :

$('[class^=old]')

Syntax :

• [attr^=vvv] => Select all elements have attribute attr ,its value starts with vvv.

• [attr$=vvv] => Select all elements have attribute attr ,its value ends with vvv.

• [attr*=vvv] => Select all elements have attribute attr ,its value contains vvv.

Is not hasClass :

In your case , is method is suitable more than hasClass :

 if (element.is('[class^=old]')){


  }

And not

 if (element.hasClass('[class^=old]')){


  }

JQuery Plugin :

$.fn.hasClassStartsWith=function(prefix){
    return $(this).is(`[class^=${prefix}]`);
};

Then :

if (element.hasClassStartsWith('old')){
     // do your staff
}

DEMO

Basically it would need to be a two part check. You can run a selector to find any class that contains the word.

now that is going to find "old", "cold", "bold". The reason you can not use starts with, because a class can be "foo old" and that does not start with old.

So what can you do, well you can use contains, than you can loop through and match with a regular expression to see if the classlist has a word that starts with it.

var elems = $('[class*="old"]').filter( function () {
    return $(this).attr("class").match(/(^|\s)old/);
} ).addClass("picked");

.picked { background-color: yellow; }

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="old">old</div>
<div class="old-asdf">old-asdf</div>
<div class="foo-old-asdf">foo-old-asdf</div>
<div class="cold">cold</div>
<div class="old foo">old foo</div>
<div class="foo old">foo old</div>
<div class="foo olddoo">foo olddoo</div>
<div class="foo ald">foo ald</div>