web-dev-qa-db-fra.com

sélecteur jQuery où text = une valeur

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 fonctionner, cela ne fonctionne pas.

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

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

jqueryjquery-selectors
22
Gene

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

Essaye ça:

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

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

Par exemple, si vous voulez 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'.

21
tgmdbm

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

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

Une légère variante de l'excellente réponse de @ tgmdbm. La seule différence est qu'il sélectionne uniquement les nœuds ayant un seul nœud de texte enfant correspondant exactement à l'argument hasText(). Alors 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;
     };
  }
1
wbdarby

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

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

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

Cependant, si c'est le entier du texte de cette div, testez-le directement.

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

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");
    });
});
0
Diya Menon

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

0
Peter Boughton