Определите слово и добавьте класс в тело

#javascript #jquery

Вопрос:

Приведенный ниже запрос jQuery обнаруживает слово first и third в любом <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'); , но я не в состоянии собрать это воедино.

Пожалуйста, помогите.

1. Какова цель изменения цвета или класса. Это из соображений стиля?

2. jsfiddle.net/fk05dabw

3. Я не могу собрать это воедино. вы имеете в виду, что вам нужно несколько классов в теле или только один из них ?

Ответ №1:

Вы можете выполнить поиск ближайшего HTML-элемента тела. Вы можете сделать это, выполнив следующие действия:

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

Другой возможностью было бы просто выполнить поиск элемента тела следующим образом:

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

Источник: https://jsfiddle.net/fk05dabw/