jQuery match part of class with hasClass

Question

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

        
                      

              相关标签:
       
      

Answer 1

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>

Answer 2

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')

Answer 3

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

will not fail with something like this:

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

Answer 4

why don't you use for to check numbers

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

Answer 5

$('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)

Answer 6

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"))