jQuery selector where text = some value

StackOverflow https://stackoverflow.com/questions/813477

  •  03-07-2019
  •  | 
  •  

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.

Was it helpful?

Solution

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');

OTHER TIPS

You can create your own selector methods

For example, if you want to be able to do the following:

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

You can define the hasText method as follows

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

props[3] contains the text inside the brackets after ':hasText'.

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();

A slight variant on @tgmdbm's excellent answer. The only difference being that it only selects nodes that have a single child text node exactly matching the hasText() argument. Whereas .innerText returns the concatenation of all descendant text nodes.

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

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

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

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

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

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

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">
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top