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

Question

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!

do you want to add <span class="home_readmore"> css to this span ? — Casper
– Casper, Commented Nov 7, 2017 at 8:58
As mentioned on the jQuery website here: api.jquery.com/contains-selector, the ':contains' selector is case sensitive. Change your 'Read More' to 'Read more' and it'll work (the second case) — Sayed
– Sayed, Commented Nov 7, 2017 at 8:58
the first is not modifying all elements but should be only 1 element as it is using id selector, id should be unique (only 1), if not then your HTML is flawed — am05mhz
– am05mhz, Commented Nov 7, 2017 at 9:05

CodingIntrigue · Accepted Answer · 2017-11-07 08:59:30Z

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>

Stéphane Ammar · Accepted Answer · 2017-11-07 10:06:09Z

3

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

edited Nov 7, 2017 at 10:06

answered Nov 7, 2017 at 8:58

Stéphane Ammar

1,45410 silver badges17 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related