jqueryから指定されたクラス名とテキストを持つ要素にCSSを追加する

Question

jQueryで私のページのいくつかの要素にCSSを設定する必要があります。 htmlコードを変更することはできません。 span要素にはcssを設定する必要があります。 私は同じclass nameと同じスパンを持っていますが、その上に別のテキストがあります。 私はこれらのテキストをスパン上に表示しています。 私は、Read MoreのボタンだけでCSSを追加する必要があります。

これはhtml次のとおりです。

<div class="loop-entry-content clr"> 
    <header> 
     <h2 class="loop-entry-title entry-title"> 
      <a href="http://staging.princetonpartners.com/organization-trapped-inside-legacy-box/">Is Your Organization Trapped Inside the ...</a> 
     </h2> 
    </header> 

    <div class="loop-entry-excerpt entry clr"> 
     In my first job out of college, I worked as a Cobol programmer updating the computer ...<br> 
     <span class="home_readmore"><a href="http://staging.princetonpartners.com/organization-trapped-inside-legacy-box/">Read more</a></span> 
    </div> 
</div> 

これは私がしようとしたものです：

$('#readMore_button').addClass('home_readmore_button'); 

$("span:contains('Read More')").parent().addClass("home_readmore_button"); 

最初は同じクラスを持つすべての要素を変更します。 2番目は何もしません。ありがとう！

Answer 1

あなたはあなたのクラスの各スパンのテキストをテストして、あなたのCSSルールを追加することができるかどうか:selector状態のためnecessaire

$("span.className").each(function(){ 
    var text = $(this).text(); 
    if(text.toLowerCase() == 'read more'){ 
     $(this).addClass("home_readmore_button"); 
    } 
}); 

Answer 2

ドキュメント：

テキスト：を探すためにテキストの文字列。 大文字と小文字の区別です。

だから、持っている必要があります。

$("span:contains('Read more')").parent().addClass("home_readmore_button"); 

$("span:contains('Read more')").parent().addClass("home_readmore_button");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="loop-entry-content clr"> 
 
     <header> 
 
     <h2 class="loop-entry-title entry-title"> 
 
      <a href="http://staging.princetonpartners.com/organization-trapped-inside-legacy-box/">Is Your Organization Trapped Inside the ...</a> 
 
      </h2> 
 
     </header> 
 

 
    <div class="loop-entry-excerpt entry clr"> 
 
       In my first job out of college, I worked as a Cobol programmer updating the computer ...<br> 
 
     <span class="home_readmore"><a href="http://staging.princetonpartners.com/organization-trapped-inside-legacy-box/">Read more</a></span> 
 
    </div> 
 
</div>

Answer 3

最初にあなたのクラス、そしてそれらのすべてスルーループとチェックしてすべてのスパンを取得するためにきれいになりますコンテンツ。

$('.test').each(function(index, element){ 
 
    var el = $(element); 
 
    if (el.text() === 'test2') { 
 
    el.addClass('found') 
 
    } 
 
})

.test {color: green} 
 
.found {color: red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
 
<span class="test">test</span> 
 
<span class="test">test</span> 
 
<span class="test">test</span> 
 
<span class="test">test2</span> 
 
<span class="test">test</span> 
 
<span class="test">test2</span> 
 
<span class="test">test</span> 
 
<span class="test">test</span> 
 
<span class="test">test</span> 
 
<span class="test">test</span> 
 
<span class="test">test2</span> 
 
<span class="test">test</span> 
 
<span class="test">test</span> 
 
<span class="test">test</span> 
 
<span class="test">test</span> 
 
<span class="test">test</span> 
 
<span class="test">test2</span> 
 
<span class="test">test</span> 
 
<span class="test">test</span> 
 
<span class="test">test</span>