jQuery 选择器，其中文本 = 某个值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/813477/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery selector where text = some value
提问by
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.
我有一个对象（在这种情况下是来自 js-kit 的评级对象），如果评级值为“未评级”，我想让它不可见。我无法使用正确的 jQuery 选择器来执行此操作。
Even though the code below seems like it should work, it does not.
尽管下面的代码看起来应该可以工作，但实际上并没有。
$(".js-rating-labelText:contains('unrated')").css("visibility", "hidden");
.js-rating-labelTextis a class that's set on the text.
.js-rating-labelText是在文本上设置的类。
采纳答案by brianpeiris
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');
回答by tgmdbm
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 hasTextmethod as follows
您可以hasText按如下方式定义该方法
$.expr[':']['hasText'] = function(node, index, props){
return node.innerText.contains(props[3]);
}
props[3]contains the text inside the brackets after ':hasText'.
props[3]包含':hasText' 后括号内的文本。
回答by brianpeiris
Perhaps the issues is with the :contains('Unrated')part of the function. As changing the text to any random value produces the same result:
也许问题在于:contains('Unrated')函数的一部分。由于将文本更改为任何随机值会产生相同的结果：
$("#ratingDiv:contains('somerandomtext')").hide();
回答by wbdarby
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 .innerTextreturns the concatenation of all descendant text nodes.
@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;
};
}
回答by Chris Brandsma
You might consider using the hide() / show() methods as well.
您也可以考虑使用 hide() / show() 方法。
$(".js-rating-labelText:contains('unrated')").hide()
回答by Peter Boughton
Make sure your code is running afterthe js-kit function has populated the text, and not before it.
确保您的代码在 js-kit 函数填充文本之后运行，而不是在它之前运行。
回答by b. e. hollenbeck
Based on the HTML you provided,I don't see where the 'unrated' text you're testing for is coming from.
根据您提供的 HTML，我看不到您正在测试的“未评级”文本来自何处。
However, if that is the entiretyof the text in that div, just test for it directly.
但是，如果那是该div 中的全部文本，则直接对其进行测试。
if ($('.js-rating-labelText').text() == 'unrated'){
$(this).hide();
}
回答by Diya Menon
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.
示例：-以下 jQuery 选择器语法从已选择（匹配）的 HTML 元素集中选择第一个或第 n 个元素。
$("selector:contains(searchText)")
Html:-
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:-
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");
});
});
回答by Diya Menon
Here is some of the html coming from the javascript function:
以下是来自 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">
