JQuery Parent Div element containing content X
I need to add a CSS class to a TR (or multiple TRs) of a TD parent element that contains specific text.
Due to the CMS, I cannot manage the code, but I can add JQuery and CSS.
I've tried several things but no luck.
Here's an example of what I had in mind.
<style>
tr.highlight { background: Blue;}
</style>
<table>
<tr>
<td>
Pet
</td>
<td>
Number of Legs
</td>
</tr>
<tr>
<td>
Cat
</td>
<td>
4
</td>
</tr>
<tr>
<td>
Doggie
</td>
<td>
4
</td>
</tr>
</table>
And I essentially want jquery to add this class (highlight) to the offending TR.
** I know this is not an ideal approach, but desperate times call for desperate measures. **
Thanks for your help.
a source to share
You are looking for a selector:contains()
.
The following will add a class highlight
to the parent (must be TR
) of every TD containing a string "doggie"
:
$('td:contains("doggie")').parent().addClass('highlight');
Please note that the text must have an appropriate case to be selected, i.e. $('td:contains("doggie")
and are $('td:contains("DoGGiE")')
n't the same!
a source to share