Highlight a word's parent using jQuery?
function, highlight, javascript, jquery
Solution
$('li').each(function () {
$(this).html($(this).html().replace(/Lorem/ig, "<mark>$&</mark>"));
if ($(this).text().toLowerCase().indexOf('lorem') >= 0) $(this).addClass('look-at-me');
});
jsFiddle example
Problem
Let's say for example that I have a webpage. ``` <ul> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li>Aliquam tincidunt mauris eu risus.</li> <li>Vestibulum auctor dapibus neque.</li> </ul> ``` I want to find all instances of the word 'Lorem' and manipulate them in two ways: - Wrap it with `<mark>` HTML5 element - Run `.addClass('look-at-me');` on its parent element. So the resulting HTML would be ``` <ul> <li class="look-at-me"><mark>Lorem</mark> ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li>Aliquam tincidunt mauris eu risus.</li> <li>Vestibulum auctor dapibus neque.</li> </ul> ``` I've read all the comments on Highlight a word with jQuery and I've been playing around with the JS code from highlight: JavaScript text higlighting jQuery plugin but both of these deal with ONLY highlighting the word in context. I manipulated the code to wrap the word using `<mark>` but I'm not skilled enough with JS to achieve my #2 goal of highlighting the parent container. I'm eager to see your helpful suggestions. Thanks! EDIT: SOLVED! http://jsfiddle.net/GB8zP/1/