如何为 :contains 使用变量而不是类?

克里斯·弗莱彻

我希望能够获得.testClass. 我怎么能那样做?

$("#testId").on("click", function() {
  var realSearch = "World";
  $(".testClass:contains('" + realSearch + "')").css("background-color", "yellow");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="testId" type="button">Test Me</button>
<p class="testClass">Hello World</p>

曲折的

如果您想在字符串中查找某个单词,您可以考虑制作自己的搜索功能。查看以下示例。

$(function() {
  function searchText(text, word) {
    var found = false;
    var regex = new RegExp(word, "i");
    if (text.match(regex) !== null) {
      found = true;
    }
    return found;
  }

  $("#testId").on("click", function() {
    var realSearch = "Porta";
    $(".testClass").each(function(i, elem) {
      if (searchText($(elem).text().toLowerCase(), realSearch)) {
        console.log("Found in P" + i, realSearch);
        $(elem).addClass("highlight");
      } else {
        console.log("Not Found in P" + i, realSearch);
      }
    });
  });
});
.highlight {
  background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="testId" type="button">Test Me</button>
<p class="testClass">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nec enim ac augue tempor dictum sed consequat ante. Phasellus porttitor volutpat arcu et mollis. Fusce feugiat libero in odio bibendum, eget cursus arcu lacinia. Vestibulum ante ipsum primis
  in faucibus orci luctus et ultrices posuere cubilia curae; Mauris erat ligula, tincidunt sed diam eget, pharetra pretium ipsum. Nulla nec risus lectus. Nullam at nulla dolor. Etiam congue vehicula dolor sit amet viverra. Curabitur vel magna laoreet,
  blandit lorem ultricies, lobortis lorem.</p>
<p class="testClass">Sed quis bibendum nibh. Donec imperdiet velit elementum augue condimentum ullamcorper. Phasellus finibus scelerisque massa condimentum eleifend. Proin imperdiet enim id magna accumsan, eget eleifend eros convallis. Phasellus ultrices volutpat efficitur.
  Aliquam in venenatis nibh. Aenean tempor odio sed blandit mollis. Sed posuere fermentum enim pellentesque vestibulum. Aliquam vel lorem imperdiet, dignissim neque eget, posuere turpis. Vestibulum libero lacus, facilisis id mollis vitae, porta eu sem.
  Nulla mattis, ex porta lobortis suscipit, erat purus mattis massa, id dictum nunc dui vel dui.</p>
<p class="testClass">Fusce mattis elit ante, ac dignissim leo venenatis ut. In luctus, libero sit amet aliquam commodo, mauris dolor tincidunt sapien, non dictum ex neque lobortis nibh. Proin vitae maximus ligula. Curabitur pellentesque egestas dolor et molestie. Praesent
  magna mauris, feugiat quis ultrices eget, elementum nec purus. Etiam faucibus vel urna at rhoncus. Duis a scelerisque lorem. Etiam scelerisque, sem in pretium interdum, sem metus vulputate ipsum, et imperdiet sem dui ut augue. Etiam eget ante ut tortor
  suscipit ultrices eu viverra felis. Integer vitae aliquam sapien. Sed feugiat, risus sed posuere faucibus, nisi lectus finibus quam, eu aliquet elit purus sed justo. Phasellus vel mauris ut augue vulputate consequat eget id erat.</p>

这将突出显示包含该单词的段落。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章