Question

我将ACF与WordPress结合使用，并且在网站的各个位置可能会输入“无家可归”一词。如果是这样，我只想定位“无家可归”一词，并更改其颜色。

我知道我可以使用contains()定位包含单词的div，但是如何仅向单词添加类而不是div？

$("h2:contains(homeless)").addClass("new-class");

Answer 1

您实际上可以使用具有类new-class的另一个HTML元素替换文本，然后用新生成的HTML替换h2的HTML。

$(function() {
  $('h2:contains(Homeless)').each(function(index, elem) {
    $(elem).html(function(i,text) {return text.replace(/homeless/gi, '<span class="new-class">Homeless</span>')});
  });
});

您应该遍历元素以操纵每个元素，而不是立即定位集合。请参见下面的代码段。.

$(function() {
  $('h2:contains(Homeless)').each(function(index, elem) {
    $(elem).html(function(i,text) {return text.replace(/homeless/gi, '<span class="new-class">Homeless</span>')});
  });
});

.new-class {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Homeless Heading</h2>
<h2>Another Heading</h2>

定位特定单词并使用jQuery

1 个答案: