jQuery 선택기 여기서 텍스트 = 일부 값
-
03-07-2019 - |
문제
등급 값이 '무제한'인 경우 보이지 않게하려는 객체 (이 경우 JS-KIT의 등급 객체)가 있습니다. 올바른 jQuery 선택기를 얻는 데 어려움이 있습니다.
아래 코드가 작동하는 것처럼 보이지만 그렇지 않습니다.
$(".js-rating-labelText:contains('unrated')").css("visibility", "hidden");
.js-rating-labelText
텍스트에 설정된 수업입니다.
해결책
텍스트 내용을 기반으로 요소를 선택하는 또 다른 방법이 있습니까?
이 시도:
$('.js-rating-labelText').filter(function(){
return (/unrated/i).test($(this).text())
}).css('visibility', 'hidden');
다른 팁
자신만의 선택기 방법을 만들 수 있습니다
예를 들어, 다음을 수행 할 수 있으려면 다음을 수행 할 수 있습니다.
$('.js-rating-label:hasText(unrated)');
당신은 정의 할 수 있습니다 hasText
다음과 같은 방법
$.expr[':']['hasText'] = function(node, index, props){
return node.innerText.contains(props[3]);
}
props[3]
': hastext'후 괄호 안에 텍스트가 포함되어 있습니다.
아마도 문제는 :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 함수는 텍스트가 아닌 텍스트를 채웠습니다.
당신이 제공 한 HTML을 기반으로, 나는 당신이 테스트하고있는 '무제한'텍스트가 어디에서 왔는지 알 수 없습니다.
그러나 그것이 있다면 전체 해당 DIV의 텍스트 중에서 직접 테스트하십시오.
if ($('.js-rating-labelText').text() == 'unrated'){
$(this).hide();
}
Hide () / show () 메소드도 사용하는 것을 고려할 수도 있습니다.
$(".js-rating-labelText:contains('unrated')").hide()
주제를 설명하는 가장 좋은 방법은 예제와 참조 링크를 제공하는 것입니다.
예시:-다음 JQuery Selector Syntax는 이미 선택한 (일치하는) 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">