Utilisation du sélecteur «commence par» sur les noms de classe individuels

Si j'ai ce qui suit:

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

Je peux utiliser le sélecteur suivant pour trouver les deux premiers DIV:

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

Cependant, si j'ai ceci:

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

Il ne trouvera que le deuxième DIV, car la classe du premier div est retournée sous forme de chaîne (je pense) et ne commence pas réellement par 'apple-' mais plutôt par 'some-'

Une solution consiste à ne pas utiliser commence par, mais contient à la place:

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

Le problème avec cela est qu'il sélectionnera également le 3e DIV dans mon exemple.

Question: Via jQuery, quelle est la bonne façon d'utiliser les sélecteurs de prédicat sur les noms de classe individuels, plutôt que l'attribut de classe entier sous forme de chaîne? Est-ce juste une question de saisir la CLASSE, puis de la diviser en un tableau, puis de faire une boucle sur chaque individu avec regex? Ou existe-t-il une solution plus élégante / moins verbeuse?

Classes commençant par "pomme-" plus les classes contenant "pomme-"

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

Je recommanderais de faire de la "pomme" sa propre classe. Vous devriez éviter le début par / se terminant par si vous le pouvez, car pouvoir sélectionner en utilisant div.appleserait beaucoup plus rapide. C'est la solution la plus élégante. N'ayez pas peur de diviser les choses en classes séparées si cela rend la tâche plus simple / plus rapide.

c'est pour le préfixe avec

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

c'est pour commencer par donc vous n'avez pas besoin d'avoir le caractère '-' là-dedans

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

vous pouvez trouver un tas d'autres variations intéressantes du sélecteur jQuery ici https://api.jquery.com/category/selectors/

Bien que la réponse principale ici soit une solution de contournement pour le cas particulier du demandeur, si vous recherchez une solution pour utiliser réellement `` commence par '' sur les noms de classe individuels:

Vous pouvez utiliser ce sélecteur jQuery personnalisé, que j'appelle :acp()«Préfixe de classe A». Le code est au bas de cet article.

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

Cela sélectionnera tous les <div>éléments qui ont au moins un nom de classe commençant par la chaîne donnée ("starting_text" dans cet exemple), indépendamment du fait que cette classe soit au début ou ailleurs dans les chaînes d'attributs de classe.

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

Cela renverra les éléments 1, 2 et 3, mais pas 4 ou 5.

Voici la déclaration du :acpsélecteur personnalisé, que vous pouvez placer n'importe où:

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

J'ai fait cela parce que je fais beaucoup de piratage GreaseMonkey de sites Web sur lesquels je n'ai pas de contrôle backend, donc j'ai souvent besoin de trouver des éléments avec des noms de classes qui ont des suffixes dynamiques. Cela a été très utile.

Essaye ça:

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

dans ce cas, la réponse de Josh Stodola est correcte Classes qui commencent par "apple-" plus les classes qui contiennent "apple-"

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

mais si l'élément a plusieurs classes comme celle-ci

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

alors la solution de Josh Stodola ne fonctionnera pas
car cela doit faire quelque chose comme ça

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

peut-être que cela aide quelqu'un d'autre merci

Si un élément a plusieurs classes "[class ^ = 'apple-']" ne fonctionne pas, par exemple

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