javascript - 检测一个单词并将Class添加到正文

标签 javascript jquery

下面的 jQuery 检测到单词 firstthird在任何 <p>文本并为其添加黄色或红色背景。

$(document).ready(function(){
  $("p:contains(first)").css("background-color", "yellow");
  $("p:contains(third)").css("background-color", "red");
});

<p>I'm the first sentence.</p>
<p>I'm the second sentence.</p>
<p>I'm the third sentence.</p>
<p>I'm the fourth sentence.</p>

JSFiddle:https://jsfiddle.net/3p0nmw4f/1/

但是,我不想突出显示文本,而是想 addClass像这样的 html 文档正文:

<body class="first">

<body class="third">

我知道我们可以使用$(document.body).addClass('first');来实现这一点但我无法将它们组合在一起。

请帮忙。

最佳答案

您可以搜索最接近的正文 HTML 元素。 您可以通过执行以下操作来做到这一点:

$(document).ready(function(){
  $("p:contains(first)").closest('body').addClass('first');
  $("p:contains(third)").closest('body').addClass('third');
});

另一种可能性是简单地搜索 body 元素,如下所示:

$(document).ready(function(){
  if ($("p:contains(first)"))
    $("body").addClass("first")
  if ($("p:contains(third)"))
    $("body").addClass("third")
});

来源:https://jsfiddle.net/fk05dabw/

关于javascript - 检测一个单词并将Class添加到正文,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69332786/

相关文章:

jquery - 客户端验证不适用于 ASP.NET MVC 2 中的子属性?

jquery - 使用 JQuery ajax 调用来调用 Controller

javascript - Bootstrap Vue - 更改下拉背景

php - 点击浏览器后退按钮时哪种解决方案最好

javascript - 如何在同一个地方设置可扩展图标

javascript - 当某些输入发生更改时触发 ajax 请求

jquery - Flask JQuery 动态切换文本

javascript - 相关视频及部分内容详细信息和统计 - Youtube API V3

javascript - 待办事项应用程序 : Is one monster function better than several smaller functions?

javascript - JQuery:在父容器中显示/隐藏图像