Question

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

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

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

有什么想法吗？

Answer 1

您可以使用startswith CSS3 selector获取这些div：

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

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

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

要使用确切的/project\d/正则表达式，您可以查看jQuery selector regular expressions或使用

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

Answer 2

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

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

然后你可以使用：

找到它们

$('.project')

Answer 3

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

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

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

Answer 4

$('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 （但它有错误，所以我修复了它）

Answer 5

您可以改进现有的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>

Answer 6

为什么不用来检查数字

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

jQuery匹配hasClass类的一部分

6 个答案: