一流的jQuery的匹配部分与hasClass一流的jQuery的匹配部分与hasClass(jQu

2019-05-12 03:59发布

我有几个div的以“项目[0-9]”类:

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

我要检查,如果该元素具有“项目[0-9]”类。 我有.hasClass("project")但我坚持用匹配的号码。

任何的想法?

Answer 1:

您可以使用startswith CSS3选择器来获得这些div:

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

要检查一个特定的元素,你会使用.is()而不是hasClass

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

对于使用确切/project\d/正则表达式,你可以检查出jQuery选择正则表达式或使用

/(^|\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 (但它errrors所以我固定它)



Answer 5:

你为什么不使用查询号码

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


文章来源: jQuery match part of class with hasClass