jQuery match part of class with hasClass

Question

I have several div's with "project[0-9]" classes:

<div class="project1"></div>
<div class="project2"></div>
<div class="project3"></div>
<div class="project4"></div>

I want to check if the element has a "project[0-9]" class. I have .hasClass("project") but I'm stuck with matching numbers.

Any idea?

@Bergi There are moments when you can't. The answer below helped me because I can only inject my own javascript in the page I'm working on, not change the html itself. — s1h4d0w
– s1h4d0w, Commented Jul 8, 2016 at 11:15

Community · Accepted Answer · 2017-05-23 10:31:34Z

63

You can use the startswith CSS3 selector to get those divs:

$('div[class^="project"]')

To check one particular element, you'd use .is(), not hasClass:

$el.is('[class^="project"]')

For using the exact /project\d/ regex, you can check out jQuery selector regular expressions or use

/(^|\s)project\d(\s|$)/.test($el.attr("class"))

edited May 23, 2017 at 10:31

CommunityBot

11 silver badge

answered Dec 14, 2012 at 12:33

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ditto Over a year ago

So something like: if($(this) == $('div[class^="project"]')) ??

Panwen Wang Over a year ago

Note that the startwith select will not work if projectN is not the first class name of the element, say class="someclass project1". So the last regex version should be used in this case.

Akhil Sekharan · Accepted Answer · 2012-12-14 12:39:07Z

14

A better approach for your html would be: I believe these div's share some common properties.

<div class="project type1"></div>
<div class="project type2"></div>
<div class="project type3"></div>
<div class="project type4"></div>

Then you can find them using:

$('.project')

answered Dec 14, 2012 at 12:39

Akhil Sekharan

12.7k8 gold badges43 silver badges58 bronze badges

Comments

migli · Accepted Answer · 2016-09-11 06:21:37Z

11

$('div[class*="project"]')

will not fail with something like this:

<div class="some-other-class project1"></div>

answered Sep 11, 2016 at 6:21

migli

3,2381 gold badge33 silver badges34 bronze badges

1 Comment

Adam Baranyai Over a year ago

but it will also fire on <div class='some-other-project-class'>

Douglas.Sesar · Accepted Answer · 2015-11-15 03:49:48Z

$('div[class^="project"]')

will fail with something like this:

<div class="some-other-class project1"></div>

Here is an alternative which extends jQuery:

// Select elements by testing each value of each element's attribute `attr` for `pattern`.

  jQuery.fn.hasAttrLike = function(attr, pattern) {

    pattern = new RegExp(pattern)
    return this.filter(function(idx) {
      var elAttr = $(this).attr(attr);
      if(!elAttr) return false;
      var values = elAttr.split(/\s/);
      var hasAttrLike = false;
      $.each(values, function(idx, value) {
        if(pattern.test(value)) {
          hasAttrLike = true;
          return false;
        }
        return true;
      });
      return hasAttrLike;
    });
  };



jQuery('div').hasAttrLike('class', 'project[0-9]')

original from sandinmyjoints: https://github.com/sandinmyjoints/jquery-has-attr-like/blob/master/jquery.hasAttrLike.js (but it had errrors so I fixed it)

Slavik Meltser · Accepted Answer · 2020-05-18 15:28:18Z

You can improve the existing hasClass method:

// This is all that you need:
(orig => { 
  jQuery.fn.hasClass = function(className) {
    return className instanceof RegExp
      ? this.attr('class') && this.attr('class')
        .split(/\s+/)
        .findIndex(name => className.test(name)) >= 0
      : orig.call(this, className); 
  }
})(jQuery.fn.hasClass);

// Test the new method:
Boolean.prototype.toString = function(){ this === true ? 'true' : 'false' };
const el = $('#test');
el.append("hasClass('some-name-27822'): " + el.hasClass('some-name-27822'));
el.append("\nhasClass(/some-name-\d+/): " + el.hasClass(/some-name-\d+/));
el.append("\nhasClass('anothercoolclass'): " + el.hasClass('anothercoolclass'));
el.append("\nhasClass(/anothercoolclass/i): " + el.hasClass(/anothercoolclass/i));
el.append("\nhasClass(/^-name-/): " + el.hasClass(/^-name-/));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<pre id="test" class="some-name-0 some-name-27822 another-some-name-111 AnotherCoolClass"></pre>

serhads · Accepted Answer · 2012-12-14 12:37:38Z

-7

why don't you use for to check numbers

for (var i = 0; i < 10; i++) {
                if(....hasClass("project"+i))
                {
            //do what you need
                }
            }

answered Dec 14, 2012 at 12:37

serhads

4622 gold badges7 silver badges22 bronze badges

Collectives™ on Stack Overflow

jQuery match part of class with hasClass

6 Answers 6

2 Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related