Selector jQuery donde texto = algún valor

Question

Tengo un objeto (en este caso, un objeto de calificación de js-kit) que quiero hacer invisible si el valor de calificación está 'sin calificación'. Tengo problemas para obtener el selector jQuery correcto para hacer esto.

Aunque el código a continuación parece que debería funcionar, no lo hace.

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

.js-rating-labelText es una clase establecida en el texto.

Answer 1

  

¿Hay otra forma de seleccionar un elemento en función del contenido del texto?

Prueba esto:

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

Answer 2

Puedes crear tus propios métodos de selección

Por ejemplo, si desea poder hacer lo siguiente:

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

Puede definir el método hasText de la siguiente manera

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

props [3] contiene el texto dentro de los corchetes después de ': hasText'.

Answer 3

Quizás los problemas estén relacionados con la parte : contiene ('Unrated') de la función. Como cambiar el texto a cualquier valor aleatorio produce el mismo resultado:

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

Answer 4

Una ligera variante de la excelente respuesta de @ tgmdbm. La única diferencia es que solo selecciona los nodos que tienen un solo nodo de texto hijo que coincide exactamente con el argumento hasText () . Mientras que .innerText devuelve la concatenación de todos los nodos de texto descendientes.

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

Answer 5

Asegúrese de que su código se esté ejecutando después de la función js-kit ha llenado el texto, y no antes.

Answer 6

Según el código HTML que proporcionaste, no veo de dónde proviene el texto "no calificado" que estás probando.

Sin embargo, si esa es la totalidad del texto en ese div, simplemente pruébalo directamente.

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

Answer 7

También puedes considerar utilizar los métodos hide () / show ().

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

Answer 8

La mejor manera de explicar el tema es dando un ejemplo y un enlace de referencia: -

Ejemplo: - La siguiente sintaxis del selector jQuery selecciona el primer o enésimo elemento del conjunto de elementos HTML ya seleccionados (coincidentes).

$("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

Aquí hay algunos de los html que provienen de la función 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">