jQuery选择器,其中text =某个值

时间:2009-05-01 21:58:48

标签: jquery jquery-selectors

我有一个对象(在这种情况下是来自js-kit的评级对象),如果评级值为“未评级”,我想使其不可见。我无法获得正确的jQuery选择器来执行此操作。

即使下面的代码看起来应该有效,但事实并非如此。

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

.js-rating-labelText是一个在文本上设置的类。

9 个答案:

答案 0 :(得分:21)

您可以创建自己的选择器方法

例如,如果您希望能够执行以下操作:

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

您可以按如下方式定义hasText方法

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

props[3]包含':hasText'后括号内的文字。

答案 1 :(得分:19)

  

是否有其他方法可以根据文本内容选择元素?

试试这个:

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

答案 2 :(得分:7)

问题可能与函数的:contains('Unrated')部分有关。将文本更改为任意随机值会产生相同的结果:

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

答案 3 :(得分:1)

@ tgmdbm的优秀答案略有不同。唯一的区别是它只选择具有与hasText()参数完全匹配的单个子文本节点的节点。而.innerText返回所有后代文本节点的串联。

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

答案 4 :(得分:0)

确保您的代码在之后运行 js-kit函数已填充文本,而不是之前。

答案 5 :(得分:0)

您也可以考虑使用hide()/ show()方法。

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

答案 6 :(得分:0)

根据您提供的HTML,我看不到您正在测试的“未评级”文字来自何处。

但是,如果那是该div中文本的完整,则直接测试它。

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

答案 7 :(得分:0)

解释该主题的最佳方式是提供示例和参考链接: -

示例: - 以下jQuery选择器语法从已选择(匹配)的HTML元素集中选择第一个或第n个元素。

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

答案 8 :(得分:-1)

以下是来自javascript函数的一些html:

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