Javascript/jQuery to apply CSS to element containing specific text/html

Question

I'm trying to apply CSS to HTML elements that have specific HTML within them using Javascript/jQuery. What I've got is basically:

<ol>
<li>*<a href=http://foo.com/1>A bunch of text</a>
<li><a href=http://foo.com/2>More text</a>
<li>*<a href=http://foo.com/3>Even more text</a>
<li><a href=http://foo.com/4>Just a little more text</a>
</ol>

What I want is to run .addClass() on the two <li> tags that are followed by an asterisk.

I know I could use $("ol li:contains(*)") but there could be asterisks in the link text, so I can't trust that to be 100% accurate. Ideally, I'd like to find a way to run .addClass() on all <li> tags that are followed by *<a href=http://foo.com/, but just a way to run it on <li> followed by * would probably do it.

I looked at the answer to this question, but it doesn't help, even if I switched out innerText for innerHTML, because I'm not looking to match the whole HTML of the <li>, just the beginning.

You are missing the closing </li> tags.

max
– max

2013-11-10 01:30:26 +00:00
Commented Nov 10, 2013 at 1:30 — max
– max, Commented Nov 10, 2013 at 1:30

max · Accepted Answer · 2013-11-10 01:24:41Z

4

$("ol li").filter(function(){
    return $(this).text().charAt(0) === '*';
}).addClass('awesome');

answered Nov 10, 2013 at 1:24

max

103k15 gold badges113 silver badges177 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Javascript/jQuery to apply CSS to element containing specific text/html

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related