個々のクラス名で「で始まる」セレクターを使用する

次の場合：

<div class="apple-monkey"></div>
<div class="apple-horse"></div>
<div class="cow-apple-brick"></div>

次のセレクターを使用して、最初の2つのDIVを見つけることができます。

$("div[class^='apple-']")

ただし、これがある場合：

<div class="some-other-class apple-monkey"></div>
<div class="apple-horse"></div>
<div class="cow-apple-brick"></div>

最初のdivのクラスは文字列として返されるため（私は思う）、実際には「apple-」ではなく「some-」で始まるため、2番目のDIVのみが検索されます。

これを回避する1つの方法は、starts withを使用せず、代わりに次を含むことです。

$("div[class*='apple-']")

その問題は、私の例では3番目のDIVも選択することです。

質問：jQueryを使用して、クラス属性全体を文字列としてではなく、個々のクラス名で述語セレクタを使用する適切な方法は何ですか？それは単にCLASSを取得し、それを配列に分割してから、正規表現で個々のクラスをループするだけの問題ですか？または、よりエレガントで冗長性の低いソリューションはありますか？

「apple-」で始まるクラスと「apple-」を含むクラス

$("div[class^='apple-'],div[class*=' apple-']")

「apple」を独自のクラスにすることをお勧めします。可能であれば、starts-with / ends-withを使用しないでくださいdiv.apple。使用を選択できる方がはるかに高速です。それはよりエレガントなソリューションです。タスクをより単純/高速にする場合は、物事を別々のクラスに分割することを恐れないでください。

これは接頭辞用です

$("div[class^='apple-']")

これは最初からですので、そこに「-」文字を含める必要はありません

$("div[class|='apple']")

jQueryセレクターの他のクールなバリエーションの束は、https： //api.jquery.com/category/selectors/で見つけることができます 。

ここでの一番の答えは、質問者の特定のケースに対する回避策ですが、個々のクラス名で「〜で始まる」を実際に使用するための解決策を探している場合：

このカスタムjQueryセレクターを使用できます。これは:acp()、「クラスプレフィックス」を呼び出します。コードはこの投稿の下部にあります。

var test = $('div:acp("starting_text")');

これ<div>により、指定された文字列（この例では "starting_text"）で始まるクラス名が少なくとも1つあるすべての要素が選択されます。そのクラスがクラス属性文字列の先頭にあるか他の場所にあるかは関係ありません。

<div id="1" class="apple orange lemon" />
<div id="2" class="orange applelemon banana" />
<div id="3" class="orange lemon apple" />
<div id="4" class="lemon orangeapple" />
<div id="5" class="lemon orange" />

var startsWithapp = $('div:acp("app")');

これは要素1、2、および3を返しますが、 4または5 は返しません。

:acpこれは、どこにでも置くことができるカスタムセレクターの宣言です。

$(function(){
    $.expr[":"].acp = function(elem, index, m){
          var regString = '\\b' + m[3];
          var reg = new RegExp(regString, "g");
          return elem.className.match(reg);
    }
});

私がこれを作成したのは、バックエンドコントロールのないWebサイトをGreaseMonkeyでハッキングすることが多いため、動的なサフィックスを持つクラス名を持つ要素を見つける必要があることが多いためです。それはとても役に立ちました。

これを試して：

$("div[class]").filter(function() {
    var classNames = this.className.split(/\s+/);
    for (var i=0; i<classNames.length; ++i) {
        if (classNames[i].substr(0, 6) === "apple-") {
            return true;
        }
    }
    return false;
})

<div class="apple-monkey"></div>
<div class="apple-horse"></div>
<div class="cow-apple-brick"></div>

この場合、質問としてのJosh Stodolaの回答は、「apple-」で始まる正しいクラスと「apple-」を含むクラスです。

$("div[class^='apple-'],div[class*=' apple-']")

しかし、要素にこのような複数のクラスがある場合

<div class="some-class apple-monkey"></div>
<div class="some-class apple-horse"></div>
<div class="some-class cow-apple-brick"></div>

ジョシュ・ストドラの解決策は機能しません
これはこのようなことをしなければなりません

$('.some-parent-class div').filter(function () {
  return this.className.match(/\bapple-/);// this is for start with
  //return this.className.match(/apple-/g);// this is for contain selector
}).css("color","red");

それは誰か他の人の助けになるかもしれません

要素に複数のクラスがある場合、「[class ^ = 'apple-']」は機能しません。たとえば、

<div class="fruits apple-monkey"></div>