Sélecteur jQuery où text = une valeur

StackOverflow https://stackoverflow.com/questions/813477

  •  03-07-2019
  •  | 
  •  

Question

J'ai un objet (dans ce cas, un objet d'évaluation de js-kit) que je souhaite rendre invisible si la valeur d'évaluation est "non classée". J'ai du mal à trouver le bon sélecteur jQuery pour le faire.

Même si le code ci-dessous semble vouloir fonctionner, il ne fonctionne pas. 

$(".js-rating-labelText:contains('unrated')").css("visibility", "hidden");

.js-rating-labelText est une classe définie dans le texte.

Était-ce utile?

La solution

  

Existe-t-il un autre moyen de sélectionner un élément en fonction du contenu du texte?

Essayez ceci: 

$('.js-rating-labelText').filter(function(){
  return (/unrated/i).test($(this).text())
}).css('visibility', 'hidden');

Autres conseils

Vous pouvez créer vos propres méthodes de sélecteur

Par exemple, si vous souhaitez pouvoir effectuer les opérations suivantes: 

$('.js-rating-label:hasText(unrated)');

Vous pouvez définir la méthode hasText comme suit 

$.expr[':']['hasText'] = function(node, index, props){
  return node.innerText.contains(props[3]);
}

props [3] contient le texte entre crochets après ': hasText'.

Peut-être que le problème concerne le : contient ('Non évalué') une partie de la fonction. Comme changer le texte en n'importe quelle valeur aléatoire produit le même résultat: 

$("#ratingDiv:contains('somerandomtext')").hide();

Une légère variante de l'excellente réponse de @ tgmdbm. La seule différence est qu'il ne sélectionne que les nœuds ayant un seul nœud de texte enfant correspondant exactement à l'argument hasText () . Considérant que .innerText renvoie la concaténation de tous les nœuds de texte descendants. 

  if( ! $.expr[':']['hasText'] ) {
     $.expr[':']['hasText'] = function( node, index, props ) {
       var retVal = false;
       // Verify single text child node with matching text
       if( node.nodeType == 1 && node.childNodes.length == 1 ) {
         var childNode = node.childNodes[0];
         retVal = childNode.nodeType == 3 && childNode.nodeValue === props[3];
       }
       return retVal;
     };
  }

Assurez-vous que votre code est en cours d'exécution après que la fonction js-kit a rempli le texte, et pas avant.

D'après le code HTML que vous avez fourni, je ne vois pas d'où vient le texte "non classé" que vous testez.

Toutefois, s'il s'agit de la totalité du texte de cette div, il vous suffit de le tester directement. 

if ($('.js-rating-labelText').text() == 'unrated'){
  $(this).hide();
}

Vous pouvez également envisager d'utiliser les méthodes hide () / show (). 

$(".js-rating-labelText:contains('unrated')").hide()

La meilleure façon d'expliquer le sujet est de donner un exemple et un lien de référence: -

Exemple: - La syntaxe de sélecteur jQuery suivante sélectionne le premier ou le nième élément de l’ensemble des éléments HTML déjà sélectionnés (correspondants). 

$("selector:contains(searchText)")

Html: - 

<table>
<tr><td>John Smith</td><td>Marketing</td></tr>
<tr><td>Jane Smith</td><td>Sales</td></tr>
<tr><td>Mike Jordon</td><td>Technology</td></tr>
<tr><td>Mary Jones</td><td>Customer Support</td></tr>
</table>
Search: <input id="txtSearch" type="text">
<input id="btnTestIt" type="button" value="Test It">
<input id="btnReset" type="reset" value="Reset">

Jquery: - 

$(document).ready( function(){
    $("#btnTestIt").click( function(){
        var searchText = $("#txtSearch").val();
        $("td:contains('" + searchText + "')").css("background-color", "yellow");
    });
    $("#btnReset").click( function(){
        $("td").css("background-color", "white");
    });
});

Voici une partie du code HTML provenant de la fonction javascript: 

<div class="js-kit-rating" id="ratingDiv" style="width: 86px; visibility: hidden;" jk$initialized="true" path="/business/blogger-com" permalink="/businessblogger-com" freeze="yes" starcolor="Golden">
  <table class="js-ratings-tableWrapper" border="0" cellSpacing="0" cellPadding="0">
    <tbody>
      <tr>
        <td>
          <div class="js-ratingWrapper" style="width: 80px;">
          <div style="float: left; cssfloat: left;">
              <div style="width: 80px; height: 15px;">
<div class=" js-kit-objIcon" style="width: 16px; float: left; height: 15px; cssfloat: left;" imageURL="//js-kit.com/images/stars/golden.png">
  <img style="display: none;" src="//js-kit.com/images/stars/golden.png" complete="complete"/>
<div class=" js-kit-objIcon" style="width: 16px; float: left; height: 15px; cssfloat: left;" imageURL="//js-kit.com/images/stars/golden.png"/>
<div class=" js-kit-objIcon" style="width: 16px; float: left; height: 15px; cssfloat: left;" imageURL="//js-kit.com/images/stars/golden.png"/>
<div class=" js-kit-objIcon" style="width: 16px; float: left; height: 15px; cssfloat: left;" imageURL="//js-kit.com/images/stars/gray.png">
  <img style="display: none;" src="//js-kit.com/images/stars/gray.png" complete="complete"/>
<div class=" js-kit-objIcon" style="width: 16px; float: left; height: 15px; cssfloat: left;" imageURL="//js-kit.com/images/stars/gray.png"/>
<div class=" js-rating-labelText">
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top