web-dev-qa-db-fra.com

jQuery si "this" contient

J'essaie de changer tous les éléments contenant une chaîne de texte particulière en couleur rouge. Dans mon exemple, je peux faire en sorte que les éléments enfants deviennent bleus, mais il y a quelque chose dans la façon dont j'ai écrit la ligne "Remplacez-moi" qui est incorrect; le changement de couleur rouge ne se produit pas. Je note que la méthode "contains" est généralement écrite comme :contains Mais je n'ai pas pu valider cela avec $(this).

$('#main-content-panel .entry').each(function() {
       $(this).css('color', 'blue');      
});         

$('#main-content-panel .entry').each(function() {
   if($(this).contains("Replace Me").length > 0) {
        $(this).css('color', 'red'); 
    }      
});

Violon: http://jsfiddle.net/zatHH/

jquerythiscontains
22
Chris

:contains est un sélecteur. Pour vérifier si un sélecteur s'applique à une variable donnée, vous pouvez utiliser is :

if($(this).is(':contains("Replace Me")'))

Cependant, la solution de Vega est plus propre dans ce cas.

72
jkozera

Je ne pense pas qu'il y ait .contains fonction dans jQuery. Il y a un .contains mais cette fonction est utilisée pour voir si un élément DOM est un descendant d'un autre élément DOM. Voir la documentation pour .contains. (Crédits à @ beezir )

Je pense que vous cherchez :contains sélecteur. Voir ci-dessous pour plus de détails,

$('#main-content-panel .entry:contains("Replace Me")').css('color', 'red');

http://jsfiddle.net/zatHH/1/

17
Selvakumar Arumugam

vous pouvez utiliser match pour trouver le texte à l'intérieur de l'élément particulier

$('#main-content-panel .entry').each(function() {
    $(this).css('color', 'blue');      
});                     

$('#main-content-panel .entry').each(function() {
    if($(this).text().match('Replace Me')) {
        $(this).css('color', 'red'); 
    }      
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main-content-panel">
    <div class="entry">ABC</div>
    <div class="entry">ABC Replace Me</div>
    <div class="entry">ABC</div>
    <div class="entry">ABC Replace Me</div>
</div>
12
mbharanidharan88

Je pense que nous devrions convertir notre texte en minuscules. Il est préférable de vérifier en minuscules et en majuscules.

$('#main-content-panel .entry').each(function() {
    var ourText = $(this).text().toLowerCase(); // convert text to Lowercase
    if(ourText.match('replace me')) {
        $(this).css('color', 'red'); 
    }      
});
5
KoemsieLy