jQuery - Vérifiez si le contenu de la balise est égal à quelque chose puis faites quelque chose

Question

Disons que j'en ai plusieurs dans mon contenu div: <cite class="fn">blabla</cite>

Comment puis-je vérifier chaque balise citecontent (dans ce cas: blabla) avec la classe fn pour voir si elle est égale à "quelque chose" alors changer sa couleur en rouge?

Très simple.

Answer 1

$('cite.fn:contains(blabla)').css('color', 'red');

Edit: bien que cela corresponde également à "blablablabla".

$('cite.fn').each(function () {
    if ($(this).text() == 'blabla') {
        $(this).css('color', 'red');
    }
});

Cela devrait être plus précis.

Edit: En fait, je pense que la solution de bazmegakapa est plus élégante:

$('cite.fn').filter(function () {
    return $(this).text() == 'blabla';
}).css('color', 'red');;

Answer 2

Vous pouvez utiliser l'incroyable méthode .filter() . Il peut prendre une fonction comme paramètre, ce qui réduira les éléments de la collection jQuery à ceux qui réussissent son test (pour lequel la fonction renvoie true). Après cela, vous pouvez facilement exécuter des commandes sur les éléments restants:

var searchText = 'blabla';

$('cite.fn').filter(function () {
    return $(this).text() === searchText;
}).css('color', 'red');

démo jsFiddle

Answer 3

Vous pourriez potentiellement faire quelque chose comme:

$('cite.fn').each(function() {
  var el = $(this);
  if (el.text() === 'sometext') {
     el.css({ 'color' : 'red' });
  }
});

Cela déclenche une fonction contre chaque cite qui a la classe fn. Cette fonction vérifie si la valeur actuelle de cite est égale à "quelque chose".

Si c'est le cas, nous changeons la propriété CSS color (text-color) en red.

Remarque J'utilise jQuery dans cet exemple, car vous avez spécifiquement marqué votre question jQuery. Ignorez le downvote, cela a été appliqué avant de modifier une faute de frappe que j'avais faite ( el.val() plutôt que el.text() )

Answer 4

Sans jQuery:

var elms = document.querySelectorAll("cite.fn"), l = elms.length, i;
for( i=0; i<l; i++) {
    if( (elms[i].innerText || elms[i].textContent) == "blabla") {
        elms[i].style.color = "red";
    }
}