Usando o seletor 'começa com' em nomes de classe individuais

Se eu tiver o seguinte:

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

Posso usar o seguinte seletor para encontrar os dois primeiros DIVs:

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

No entanto, se eu tiver isso:

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

Ele só encontrará o segundo DIV, já que a classe da primeira div é retornada como uma string (acho) e, na verdade, não começa com 'apple-', mas sim 'some-'

Uma maneira de contornar isso é não usar, começa com, mas contém:

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

O problema é que ele também selecionará o 3º DIV no meu exemplo.

Pergunta: Por jQuery, qual é a maneira correta de usar seletores de predicado em nomes de classes individuais, em vez de todo o atributo de classe como uma string? É apenas uma questão de pegar a CLASS, dividi-la em uma matriz e, em seguida, percorrer cada uma com regex? Ou existe uma solução mais elegante / menos detalhada?

Classes que começam com "apple-" mais classes que contêm "apple-"

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

Eu recomendo fazer "apple" sua própria classe. Você deve evitar o início com / termina com, se puder, porque ser capaz de selecionar usando div.appleseria muito mais rápido. Essa é a solução mais elegante. Não tenha medo de dividir as coisas em classes separadas, se isso tornar a tarefa mais simples / rápida.

isto é para prefixo com

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

isso é para começar, então você não precisa ter o '-' char lá

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

você pode encontrar várias outras variações interessantes do seletor jQuery aqui https://api.jquery.com/category/selectors/

Embora a resposta principal aqui seja uma solução alternativa para o caso específico do solicitante, se você estiver procurando uma solução para realmente usar 'começa com' em nomes de classes individuais:

Você pode usar esse seletor jQuery personalizado, que chamo :acp()de "Um prefixo de classe". O código está na parte inferior desta postagem.

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

Isso selecionará todos e quaisquer <div>elementos que tenham pelo menos um nome de classe começando com a sequência especificada ("texto_de_inicialização" neste exemplo), independentemente de essa classe estar no início ou em outro lugar nas sequências de atributos da 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")');

Isso retornará os elementos 1, 2 e 3, mas não 4 ou 5.

Aqui está a declaração do :acpseletor personalizado, que você pode colocar em qualquer lugar:

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

Fiz isso porque faço muitos hackers no GreaseMonkey de sites nos quais não tenho controle de back-end; portanto, muitas vezes preciso encontrar elementos com nomes de classes que tenham sufixos dinâmicos. Tem sido muito útil.

Tente o seguinte:

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

nesse caso, como a resposta de Josh Stodola da pergunta está correta Classes que começam com "apple-" mais classes que contêm "apple-"

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

mas se o elemento tiver várias classes como esta

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

então a solução de Josh Stodola não funcionará,
pois isso tem que fazer algo assim

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

pode ser que ajuda alguém mais graças

Se um elemento tiver múltiplas classes "[class ^ = 'apple-']" não funcionará, por exemplo,

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