Verwenden Sie den Selektor 'beginnt mit' für einzelne Klassennamen

Wenn ich folgendes habe:

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

Ich kann den folgenden Selektor verwenden, um die ersten beiden DIVs zu finden:

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

Wenn ich jedoch Folgendes habe:

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

Es wird nur das zweite DIV gefunden, da die Klasse des ersten Divs als String zurückgegeben wird (glaube ich) und nicht mit 'apple-', sondern mit 'some-' beginnt.

Eine Möglichkeit, dies nicht zu umgehen, besteht darin, nicht mit zu beginnen, sondern Folgendes zu enthalten:

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

Das Problem dabei ist, dass in meinem Beispiel auch der 3. DIV ausgewählt wird.

Frage: Wie können Sie über jQuery Prädikatselektoren für einzelne Klassennamen und nicht für das gesamte Klassenattribut als Zeichenfolge verwenden? Geht es nur darum, die KLASSE zu greifen, sie dann in ein Array aufzuteilen und dann jede einzelne mit Regex zu durchlaufen? Oder gibt es eine elegantere / weniger ausführliche Lösung?

Klassen, die mit "apple-" beginnen, plus Klassen, die "apple-" enthalten

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

Ich würde empfehlen, "Apfel" zu einer eigenen Klasse zu machen. Sie sollten das Starten mit / enden mit vermeiden, wenn Sie können, da die Auswahl mit div.appleviel schneller wäre. Das ist die elegantere Lösung. Haben Sie keine Angst, Dinge in separate Klassen aufzuteilen, wenn dies die Aufgabe einfacher / schneller macht.

Dies ist für das Präfix mit

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

Dies ist für den Anfang mit, so dass Sie nicht das '-' Zeichen drin haben müssen

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

Eine Reihe weiterer cooler Varianten des jQuery-Selektors finden Sie hier https://api.jquery.com/category/selectors/

Während die beste Antwort hier eine Problemumgehung für den speziellen Fall des Fragestellers ist, suchen Sie nach einer Lösung für die tatsächliche Verwendung von "beginnt mit" für einzelne Klassennamen:

Sie können diesen benutzerdefinierten jQuery-Selektor verwenden, den ich als :acp()"A Class Prefix" bezeichne. Der Code befindet sich am Ende dieses Beitrags.

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

Dadurch werden alle <div>Elemente ausgewählt, bei denen mindestens ein Klassenname mit der angegebenen Zeichenfolge beginnt (in diesem Beispiel "Starttext"), unabhängig davon, ob sich diese Klasse am Anfang oder an einer anderen Stelle in den Klassenattributzeichenfolgen befindet.

<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")');

Dies gibt die Elemente 1, 2 und 3 zurück, jedoch nicht 4 oder 5.

Hier ist die Deklaration für den :acpbenutzerdefinierten Selektor, die Sie überall platzieren können:

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

Ich habe dies gemacht, weil ich viel GreaseMonkey-Hacking von Websites mache, auf denen ich keine Backend-Kontrolle habe. Daher muss ich häufig Elemente mit Klassennamen finden, die dynamische Suffixe haben. Es war sehr nützlich.

Versuche dies:

$("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>

in diesem Fall als Frage Josh Stodola Antwort ist richtig Klassen, die mit "Apfel-" beginnen plus Klassen, die "Apfel-" enthalten

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

aber wenn Element mehrere Klassen wie diese haben

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

dann wird Josh Stodolas Lösung nicht funktionieren,
dafür muss man so etwas tun

$('.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");

Vielleicht hilft es jemand anderem, danke

Wenn ein Element mehrere Klassen hat, funktioniert "[class ^ = 'apple-']" nicht, z

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