Selettore jQuery dove text = un certo valore

Question

Ho un oggetto (in questo caso un oggetto valutazione da js-kit) che voglio rendere invisibile se il valore del rating è 'non classificato'. Sto avendo problemi con il giusto selettore jQuery per farlo.

Anche se il codice seguente sembra funzionare correttamente, non lo è.

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

.js-rating-labelText è una classe che è impostato sul testo.

Answer 1

C'è un altro modo per selezionare un elemento in base al contenuto del testo?

Prova questo:

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

Answer 2

Assicurarsi che il codice sia in esecuzione dopo la funzione js-kit ha compilato il testo e non prima di esso.

Answer 3

Ecco alcuni dei html proveniente dalla funzione 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"> 

Answer 4

Si potrebbe considerare l'uso del hide()/show() metodi pure.

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

Answer 5

Forse i problemi è con la :contains('Unrated') parte della funzione. Come cambiare il testo a qualsiasi valore casuale produce lo stesso risultato:

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

Answer 6

Sulla base del codice HTML che hai fornito, non vedo dove il testo 'unrated' si sta testando per la provenienza.

Tuttavia, se questo è il completo del testo in quel div, basta testarlo direttamente.

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

Answer 7

È possibile creare i propri metodi di selezione

Ad esempio, se si vuole essere in grado di effettuare le seguenti operazioni:

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

è possibile definire il metodo di hasText come segue

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

props[3] contiene il testo all'interno delle parentesi dopo ': HasText'.

Answer 8

Il modo migliore per illustrare l'argomento è dando un esempio e un collegamento di riferimento: -

Esempio: - La seguente sintassi selettore jQuery seleziona il primo o ennesimo elemento dall'insieme di già selezionato (abbinati) elementi HTML.

$("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"); 
    }); 
}); 

Answer 9

Una leggera variante risposta eccellente @ di tgmdbm. L'unica differenza è che seleziona solo nodi che hanno un singolo nodo di testo figlio che corrisponde esattamente all'argomento hasText(). Mentre .innerText restituisce la concatenazione di tutti i nodi di testo discendenti.

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; 
    }; 
    }