web-dev-qa-db-ja.com

「this」が含まれる場合のjQuery

特定のテキスト文字列を含む要素を赤色に変更しようとしています。私の例では、子要素を青にすることができますが、「Replace Me」行を書いた方法について何か間違っています。赤い色の変化は起こりません。 「contains」メソッドは通常_:contains_と記述されますが、$(this)で検証することはできませんでした。

_$('#main-content-panel .entry').each(function() {
       $(this).css('color', 'blue');      
});         

$('#main-content-panel .entry').each(function() {
   if($(this).contains("Replace Me").length > 0) {
        $(this).css('color', 'red'); 
    }      
});
_

フィドル： http://jsfiddle.net/zatHH/

jquerythiscontains
22
Chris

:containsはセレクターです。特定の変数にセレクターが適用されるかどうかを確認するには、 is を使用できます。

if($(this).is(':contains("Replace Me")'))

ただし、この場合、Vegaのソリューションはよりクリーンです。

72
jkozera

JQueryに.contains関数があるとは思わない。 .contains関数がありますが、その関数は、DOM要素が別のDOM要素の子孫であるかどうかを確認するために使用されます。 。containsのドキュメントを参照してください。 （ @ beezir へのクレジット）

:containsセレクターを探していると思います。詳細については以下を参照してください。

$('#main-content-panel .entry:contains("Replace Me")').css('color', 'red');

http://jsfiddle.net/zatHH/1/

17
Selvakumar Arumugam

matchを使用して、特定の要素内のテキストを見つけることができます

$('#main-content-panel .entry').each(function() {
    $(this).css('color', 'blue');      
});                     

$('#main-content-panel .entry').each(function() {
    if($(this).text().match('Replace Me')) {
        $(this).css('color', 'red'); 
    }      
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main-content-panel">
    <div class="entry">ABC</div>
    <div class="entry">ABC Replace Me</div>
    <div class="entry">ABC</div>
    <div class="entry">ABC Replace Me</div>
</div>
12
mbharanidharan88

テキストを小文字に変換する必要があると思います。小文字と大文字で確認することをお勧めします。

$('#main-content-panel .entry').each(function() {
    var ourText = $(this).text().toLowerCase(); // convert text to Lowercase
    if(ourText.match('replace me')) {
        $(this).css('color', 'red'); 
    }      
});
5
KoemsieLy