Modifica delle classi CSS quando vengono visualizzate stringhe diverse in un elemento di testo con jQuery [closed]

Credo che sia il predicato di jQuery contains che stai cercando. Ti consente di cercare una stringa per trovare solo i nodi che contengono una determinata stringa.

Supponendo che i tuoi articoli in vendita abbiano classe item , questo codice aggiungerà varie classi più dettagliate in fase di runtime:

$(".item:contains('pick-up')").addClass("pickup");
$(".item:contains('hatch')").addClass('hatchback');

Ecco una dimostrazione dal vivo .

Ho scoperto che "cercare stringhe e aggiungere classi CSS in runtime" è un modo efficace - se non del tutto elegante - di applicare patch ai "dati sporchi" e aggiornare l'output di codice che non controllo. Una cosa brutta è che il test di jQuery contains fa distinzione tra maiuscole e minuscole. Quindi il codice sopra corrisponderebbe a elementi contenenti testo "pick-up" ma non testo "Pick-up" . Può essere utile utilizzare un predicato alternativo che piega il caso (vale a dire l'equivalente maiuscolo e quello minuscolo). Ecco il codice che uso per aggiungere un predicato containsfc a jQuery:

// add folded-case (i.e. case insensitive) extension to jquery contains pseudo-attribute
jQuery.expr[':'].containsfc = function(a, i, m) {
  return jQuery(a).text().toUpperCase()
      .indexOf(m[3].toUpperCase()) >= 0;
};

Quindi la ricerca diventa:

$(".item:containsfc('pick-up')").addClass("pickup");

Ma i "dati sporchi" spesso presentano molte diverse varianti, come la differenza tra "pick-up" e "pickup" . Ecco quindi un predicato di piegatura ancora più aggressivo, che rimuove tutti gli spazi non alfabetici durante il confronto (e ripiega anche il caso):

// add folded extension to jquery contains pseudo-attribute
// to make case-insensitive and also ignore non-alphabetic characters
jQuery.expr[':'].containsfolded = function(a, i, m) {
    return jQuery(a).text().replace(/[^A-Za-z]/g, "").toUpperCase()
    .indexOf(m[3].replace(/[^A-Za-z]/g, "").toUpperCase()) >= 0;
};

Cerca quindi con:

$(".item:containsfolded('pick-up')").addClass("pickup");

per abbinare solo caratteri alfabetici. Puoi salare la funzione replace inclusa per assaggiare, per mantenere o eliminare qualsiasi personaggio tu ritenga rilevante. Ecco una demo live della funzione di ricerca inclusiva.

Sebbene questo tipo di ricerca di stringhe e di approccio alle patch sia imperfetto, spesso svolge il lavoro e non richiede il controllo della fonte dei dati, né la responsabilità della sua purezza.

Nick, questo è sicuramente possibile con jQuery. Fondamentalmente se esiste nel DOM allora jQuery può manipolarlo come meglio credi. Ecco un modo possibile per realizzare questo se ti sto capendo correttamente. Spero che ti aiuti.

var elem = $('.className').text();
if(elem === 'The text value you are looking for') {
 $(elem).removeClass().addClass('your new class name');
} 

AGGIORNAMENTO: Nick, Jonathans Way è probabilmente molto più pulito. Userei il suo. Grazie per avermi ricordato questo metodo, Jonathan. :)