36

我有几个带有“project [0-9]”类的div：

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

我想检查元素是否有“project [0-9]”类。我有.hasClass("project")，但我坚持使用匹配的数字。

任何的想法？

4

6 回答 6

63

您可以使用startswith CSS3 选择器来获取这些 div：

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

要检查一个特定元素，您可以使用.is()，而不是hasClass：

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

要使用确切的/project\d/正则表达式，您可以查看jQuery 选择器正则表达式或使用

/(^|\s)project\d(\s|$)/.test($el.attr("class"))
于 2012-12-14T12:33:12.950 回答
13

对您的 html 更好的方法是：我相信这些 div 具有一些共同的属性。

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

然后您可以使用以下方法找到它们：

$('.project')
于 2012-12-14T12:39:07.503 回答
10 
$('div[class*="project"]')

不会因为这样的事情而失败：

<div class="some-other-class project1"></div>
于 2016-09-11T06:21:37.340 回答
1 
$('div[class^="project"]')

将失败，如下所示：

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

这是扩展 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]')

来自 sandinmyjoints：https ://github.com/sandinmyjoints/jquery-has-attr-like/blob/master/jquery.hasAttrLike.js （但它有错误，所以我修复了它）

于 2015-11-15T03:49:48.277 回答
0

您可以改进现有hasClass方法：

// 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>

于 2020-05-18T15:28:18.897 回答
-7

为什么不使用 for 来检查数字

for (var i = 0; i < 10; i++) {
                if(....hasClass("project"+i))
                {
            //do what you need
                }
            }
于 2012-12-14T12:37:38.157 回答