jQuery selector where text = some value

Question

I have an object (in this case a rating object from js-kit) that I want to make invisible if the rating value is 'unrated'. I'm having trouble with getting the right jQuery selector to do this.

Even though the code below seems like it should work, it does not.

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

.js-rating-labelText is a class that's set on the text.

Answer 1

Make sure your code is running after the js-kit function has populated the text, and not before it.

Answer 2

Perhaps the issues is with the :contains('Unrated') part of the function. As changing the text to any random value produces the same result:

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

Answer 3

Here is some of the html coming from the javascript function:

<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

The best way to explain the topic is by giving an example and a reference link:-

Example:- The following jQuery selector syntax selects the first or nth element from the set of already selected (matched) HTML elements.

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

Is there another way to select an element based on the text contents?

Try this:

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

Answer 6

Based on the HTML you provided,I don't see where the 'unrated' text you're testing for is coming from.

However, if that is the entirety of the text in that div, just test for it directly.

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