web-dev-qa-db-ja.com

jQueryはhasClassとクラスの一部を一致させます

「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")がありますが、一致する数字にこだわっています。

何か案が？

javascriptjqueryclass
31
ditto

startswith CSS3 selector を使用して、これらのdivを取得できます。

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

特定の要素をチェックするには、hasClassではなく .is() を使用します。

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

正確な_/project\d/_正規表現を使用するには、 jQueryセレクターの正規表現 をチェックアウトするか、

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

あなたのhtmlのためのより良いアプローチは次のとおりです：これらのdivはいくつかの共通のプロパティを共有していると思います。

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

次に、以下を使用してそれらを見つけることができます。

$('.project')
12
Akhil Sekharan
$('div[class*="project"]')

このようなもので失敗しません：

<div class="some-other-class project1"></div>
8
migli
$('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 （ただしエラーがあったので修正しました）

0
Douglas.Sesar