Bộ chọn jQuery nơi văn bản = một số giá trị

Question

Tôi có một đối tượng (trong trường hợp này là một đối tượng đánh giá từ js-kit) mà tôi muốn vô hình nếu giá trị xếp hạng là 'chưa được xếp hạng'. Tôi đang gặp rắc rối với việc chọn đúng bộ chọn jQuery để thực hiện việc này.

Mặc dù mã bên dưới có vẻ như nó hoạt động nhưng nó không hoạt động.

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

.js-rating-labelText là lớp được đặt trên văn bản.

Answer 1

Có một cách khác để chọn một yếu tố dựa trên nội dung văn bản không?

Hãy thử điều này:

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

Answer 2

Đảm bảo mã của bạn đang chạy sau chức năng js-kit đã điền văn bản chứ không phải trước văn bản.

Answer 3

Dưới đây là một số trong những html đến từ chức năng javascript:

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

Answer 4

Bạn có thể xem xét sử dụng hide()/show() phương pháp là tốt.

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

Answer 5

Có thể vấn đề là với phần :contains('Unrated') của hàm. Như thay đổi các văn bản đối với bất kỳ giá trị ngẫu nhiên tạo ra kết quả tương tự:

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

Answer 6

Dựa trên mã HTML mà bạn cung cấp, tôi không thấy nơi văn bản 'unrated' bạn đang thử nghiệm cho là đến từ.

Tuy nhiên, nếu đó là toàn bộ văn bản trong div đó, chỉ cần kiểm tra trực tiếp.

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

Answer 7

Bạn có thể tạo các phương pháp chọn của riêng bạn

Ví dụ, nếu bạn muốn để có thể làm như sau:

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

Bạn có thể xác định phương pháp hasText như sau

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

props[3] chứa văn bản bên trong dấu ngoặc sau ': hasText'.

Answer 8

Cách tốt nhất để giải thích chủ đề này là bằng cách cho một ví dụ và một liên kết tham khảo: -

Ví dụ: - Cú pháp selector jQuery sau đây chọn phần tử đầu tiên hay thứ n từ tập các đã chọn (phù hợp) các phần tử HTML.

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

Answer 9

Một biến thể nhẹ về câu trả lời tuyệt vời @ tgmdbm của. Sự khác biệt duy nhất là nó chỉ chọn các nút có một nút văn bản con duy nhất khớp chính xác với đối số hasText(). Trong khi đó, .innerText trả về kết nối của tất cả các nút văn bản con cháu.

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