jQuery selector to target any class name (of multiple present) starting with a prefix?

I'm considering one selection statement that would target one of many css class names in a single class attribute value based on a string prefix.

For example, I want any detail- prefixed class names to get targeted from the following sample links.

<a href="eg.html" class="detail-1 pinkify another">
<a href="eg.html" class="something detail-55 minded">
<a href="eg.html" class="swing narrow detail-Z">
<a href="eg.html" class="swing narrow detail-Z detail-88 detail-A">

It's reminiscent of how [class|="detail"] prefix selector works on a scalar attribute value, and also of .hasClass(className), but my question needs both concepts applied simultaneously.

Note: The detail- prefix won't necessarily be the first class name of the bunch.



Because of the way the class attribute is designed, you'll need to make use of at least two other attribute selectors (notice the whitespace in [class*=" detail-"]):

$('a[class^="detail-"], a[class*=" detail-"]');

This selects <a> elements with a class attribute that

  • starts with detail-, or
  • contains a class prefixed with detail-. Class names are separated by whitespace per the HTML spec, hence the significant space character.

If you'd like to turn this into a custom selector expression, you can do this:

$.expr[':']['class-prefix'] = function(elem, index, match) {
    var prefix = match[3];

    if (!prefix)
        return true;

    var sel = '[class^="' + prefix + '"], [class*=" ' + prefix + '"]';
    return $(elem).is(sel);

Then select it like this:


Or if you'd like to place this in a plugin:

$.fn.filterClassPrefix = function(prefix) {
    if (!prefix)
        return this;

    var sel = '[class^="' + prefix + '"], [class*=" ' + prefix + '"]';
    return this.filter(sel);

Then call it like this:


You can add your own selectors, in your case you could add a regular expression selector for attributes:


Then you could do something like this:

$(':regex(class,(^| )detail-)')


I came across that article somewhere on SO but I can't remember where.


You could also write a small plugin that uses .map() to walk through the classes.

$.fn.classBeginsWith = function(str){
  return !str ? this : this.filter( function(){
    return $.map(this.className.split(' '), function(e,i){
      if (e.match(new RegExp('^' + str, 'ig'))) return 1;

And then:



Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.