jQuery selector where text = some value

问题:

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.

回答1:

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

回答2:

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'.

回答3:

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

回答4:

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

回答5:

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

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

回答7:

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

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

回答8:

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

回答9:

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