我有一个对象(在本例中是来自 js-kit 的评级对象),如果评级值为“未评级”,我想使其不可见。我无法获得正确的 jQuery 选择器来执行此操作。
即使下面的代码看起来应该可以工作,但它没有。
$(".js-rating-labelText:contains('unrated')").css("visibility", "hidden");
.js-rating-labelText
是在文本上设置的类。
我有一个对象(在本例中是来自 js-kit 的评级对象),如果评级值为“未评级”,我想使其不可见。我无法获得正确的 jQuery 选择器来执行此操作。
即使下面的代码看起来应该可以工作,但它没有。
$(".js-rating-labelText:contains('unrated')").css("visibility", "hidden");
.js-rating-labelText
是在文本上设置的类。
您可以创建自己的选择器方法
例如,如果您希望能够执行以下操作:
$('.js-rating-label:hasText(unrated)');
您可以hasText
按如下方式定义方法
$.expr[':']['hasText'] = function(node, index, props){
return node.innerText.contains(props[3]);
}
props[3]
包含 ':hasText' 之后括号内的文本。
是否有另一种方法可以根据文本内容选择元素?
试试这个:
$('.js-rating-labelText').filter(function(){
return (/unrated/i).test($(this).text())
}).css('visibility', 'hidden');
也许问题在于:contains('Unrated')
功能的一部分。将文本更改为任何随机值都会产生相同的结果:
$("#ratingDiv:contains('somerandomtext')").hide();
@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;
};
}
确保您的代码在 js-kit 函数填充文本之后运行,而不是在它之前运行。
您也可以考虑使用 hide() / show() 方法。
$(".js-rating-labelText:contains('unrated')").hide()
根据您提供的 HTML,我看不出您正在测试的“未分级”文本来自何处。
但是,如果这是该div 中的全部文本,则直接对其进行测试。
if ($('.js-rating-labelText').text() == 'unrated'){
$(this).hide();
}
解释该主题的最佳方法是提供示例和参考链接:-
示例:- 以下 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");
});
});
以下是来自 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">