Jquery read more link to add class

Question

Is it possible for Jquery to add a class to a link that says read more automatically?

I want to use this within a CMS and for it to automatically turn any read more link into a button by adding a class.

Yahh, its Possible. But please share some code which you want to change. — Manish Trivedi, Feb 17 '11 at 12:04
@Thariama: think Wordpress, where clicking 'Read more >>' type link shows the rest of the post. — David Thomas, Feb 17 '11 at 14:16

David Thomas · Accepted Answer · 2011-02-17T12:11:10.430

3

Yep:

$('a:contains("read more")').addClass('newlyAddedClass');

This will add the class 'newlyAddedClass' to every element that contains the string 'read more', it is case-sensitive, and relies on the :contains() pseudo-selector.

edited Feb 17 '11 at 12:11

answered Feb 17 '11 at 12:05

David Thomas

249,100
51
377
410

I tried the class above, but for some reason doesn't seem to apply. An example link would be `code` Read More » `code` – Hue Feb 17 '11 at 12:25
@Matt: did you notice the part where I said '[it's] case-sensitive'? If it still doesn't work, put together a [JS Fiddle](http://jsfiddle.net/) demo of what you're working with and I'll take a look. – David Thomas Feb 17 '11 at 12:50
It works! It is case-sensitive. Look at this jsFiddle : http://jsfiddle.net/dDbEu/1/. – codea Feb 17 '11 at 12:53
@Matt: glad to have been of help =) – David Thomas Feb 17 '11 at 14:14
I have just been testing this in IE6 and IE7 on browserlab and the class doesn't seem to be added. I have read that this might be due to slower timing, but tried delaying and still not showing. Is there any problems with the JQuery add class in IE? – Hue Feb 17 '11 at 19:28
@Matt: off-hand, I don't know (I'm a hobbyist, and run Linux, so...). However: are you using a doctype, because IE 7 should certainly be able to handle the (minimal) requirements of this jQuery. – David Thomas Feb 17 '11 at 19:32
Looking into this in more detail, and testing in IE 6 and 7, errors on the page were causing this not to load correctly. weirdly only showing in IE6/7. Thank you again for your help, and patience! Regards – Hue Feb 18 '11 at 11:03

Gowri · Answer 2 · 2011-02-17T13:02:59.383

0

try some class or id

..a href="---" class="myreadmore" id="myreadmore">read more ../a>

            with class

            $('.myreadmore').addClass("myclass");   

            with id

            $('#myreadmore').addClass("myclass");

or use

contains("Read More &raquo;")

check previous anwere

refer http://api.jquery.com/contains-selector/ for contains selector

edited Feb 17 '11 at 13:02

answered Feb 17 '11 at 12:57

Gowri

16,587
26
100
160

score 0 · Answer 3 · edited May 23 '17 at 12:04

The following code will add a case insensitive Contains (Note the uppercase C) selector to jQuery

jQuery.expr[':'].Contains = function(a,i,m){
  return (a.textContent || a.innerText || "").toLowerCase().indexOf(m[3].toLowerCase())>=0;
};

You can then use a slightly modified version of David Thomas' code:

$('a:Contains("read more")').addClass('newlyAddedClass');

Which will case insensitively match everything with "read more" (So also "Read More", "rEAd More" etc.)

Found the selector in the following question: Is there a case insensitive jQuery :contains selector?

Jquery read more link to add class

3 Answers3