jQuery 선택기 여기서 텍스트 = 일부 값

StackOverflow https://stackoverflow.com/questions/813477

  •  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">
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top