views:

536

answers:

7

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 geting the right jquery selector to do this.

It seems like this should work...

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

...but does not. .js-rating-labelText is a class set on the text.

+1  A: 

You could run a regex on the contents, using innerhtml or .html. It'd be a similar way of finding if it contains a certain string.

CrazyJugglerDrummer
+1  A: 

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

Peter Boughton
It does follow the js-kit script call. Thanks.
A: 

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">
From what you've told us so far, I see no reason why it shouldn't work.It would be very helpful, if you're up to it, to duplicate the problem on a publicly available host (e.g. jsbin.com).
brianpeiris
A: 

You might consider using the hide() / show() methods as well.

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

Chris Brandsma
$(".js-rating-labelText:contains('Unrated'))").hide();Makes both rated and unrated text dissapear.
A: 

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();
Is there another way to select an element based on the text contents?
+1  A: 

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');
brianpeiris
Yeah! I set the value based on the class of the parent and used the .hide() method but this worked for me. Thank you so much! $('.js-kit-rating').filter(function() { return (/Unrated/i).test($(this).text()) }).hide();
You're welcome. Glad it finally worked.
brianpeiris
A: 

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();
}
b. e. hollenbeck