web-dev-qa-db-ja.com

テキスト=何らかの値であるjQueryセレクター

評価値が「未評価」の場合に非表示にしたいオブジェクト（この場合はjs-kitの評価オブジェクト）があります。これを行うための適切なjQueryセレクターを取得するのに問題があります。

以下のコードは機能するはずですが、機能しません。

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

.js-rating-labelTextは、テキストに設定されるクラスです。

jqueryjquery-selectors
22
Gene

テキストの内容に基づいて要素を選択する別の方法はありますか？

これを試して：

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

独自のセレクターメソッドを作成できます

たとえば、次のことができるようにしたい場合：

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

hasTextメソッドは次のように定義できます

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

props[3]には、 '：hasText'の後の角かっこ内のテキストが含まれます。

22
tgmdbm

おそらく、問題は関数の:contains('Unrated')部分にあります。テキストを任意のランダムな値に変更すると、同じ結果が得られます。

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

@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;
     };
  }
1
wbdarby

Hide（）/ show（）メソッドの使用も検討してください。

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

あなたが提供したHTMLに基づいて、あなたがテストしている「未評価」のテキストがどこから来ているのかわかりません。

ただし、それがそのdiv内のテキストのentiretyである場合は、直接テストしてください。

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

トピックを説明する最良の方法は、例と参照リンクを提供することです。-

例:-次の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");
    });
});
0
Diya Menon

コードが実行されていることを確認してくださいafter js-kit関数がテキストの前ではなく、テキストにデータを入力しました。

0
Peter Boughton