CODEWITHSUNDEEP
javascriptjquerycss
Orsi
Orsi

Reputation: 575

Adding css from jquery to elements with specified class name and text

I need to set css for some elements from my page with jQuery. I can't modify html code. I need to set css for the span element. I have more spans with the same class name but with another text on it. I have these text on the span: Read More or Load More. I need to add css only with the buttons with Read More.

This is the 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>

This is what I have tried:

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

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

The first modifies the all elements with the same class. The second it does nothing. Thanks!

Upvotes: 0

Views: 65

Answers (2)

St&#233;phane Ammar
St&#233;phane Ammar

Reputation: 1454

You can test the text of each span of your class and add your css rule if necessaire

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

Upvotes: 3

CodingIntrigue
CodingIntrigue

Reputation: 78535

The docs for :selector state:

text: A string of text to look for. It's case sensitive.

So you need to have:

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

Upvotes: 4

Related Questions