Explaining My HTML Structure:
<div id="test-listing">
<article>
<a>Some URL</a><h3>Some Text</h3>
<p>Drink this coffee</p>
</article>
<article><a>Some URL</a><h3>Some Text</h3><p>Drink this Coffee</p></article>
<article><a>Some URL</a><h3>Some Text</h3><p>Drink this Coffeeland</p></article>
<article><a>Some URL</a><h3>Some Text</h3><p>Drink this coffees</p></article>
</div>
Examining My CSS Class:
.hit-list {
background: none repeat scroll 0 0 rgba(255, 0, 0, 0.1);
border-bottom: 1px solid #FF0000;
}
I am tasked with searching for the term coffee without regard to case sensitivity within the text. It's important to note that variations like coffees, Coffee, Coffeeland should also be considered and have a specific class applied. The adjusted code would look like this:
<div id="test-listing">
<article><a>Some URL</a><h3>Some Text</h3
<p>Drink this <span class="hit-list">coffee</span></p>
</article>
<article><a>Some URL</a><h3>Some Text</h3
<p>Drink this <span class="hit-list">Coffee</span></p>
</article>
<article><a>Some URL</a><h3>Some Text</h3
<p>Drink this <span class="hit-list">Coffee</span>land</p>
</article>
<article><a>Some URL</a><h3>Some Text</h3
<p>Drink this <span class="hit-list">coffee</span>s</p>
</article>
</div>
I've researched similar posts but haven't come across anything that fits my specific requirements of working within a loop structure. Additionally, I'm not interested in using a jQuery plugin to accomplish this task.
Thank you.