javascript - 使用 jQuery 突出显示单词的父级？

Question

例如，假设我有一个网页。

<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>

我想找到单词“Lorem”的所有实例并以两种方式操作它们:

1. 用<mark>包裹它HTML5 元素
2. 运行 .addClass('look-at-me');在其父元素上。

因此生成的 HTML 将是

<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>

我已经阅读了关于 Highlight a word with jQuery 的所有评论我一直在研究 highlight: JavaScript text higlighting jQuery plugin 中的 JS 代码但是这两个都只处理在上下文中突出显示这个词。我操纵代码使用 <mark> 包装单词但是我对 JS 不够熟练，无法实现突出显示父容器的 #2 目标。我渴望看到您的有用建议。谢谢!

编辑:已解决! http://jsfiddle.net/GB8zP/1/

Answer 1

$('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