Упорядочить список стилей рядом с любым заголовком с определенным содержимым с помощью jQuery / JS

Question

У меня есть куча постов в блоге на создаваемом мной веб-сайте, но, к сожалению, я не могу применить пользовательский CSS к постам в блоге или добавить классы к чему-либо на странице.

Как можноЯ использую JavaScript или jQuery и применяю стили CSS к любому упорядоченному списку на странице, где ему предшествует <h3>Your checklist.</h3>?

<h3>Your checklist.</h3>
<ol>
  <li>Tip</li>
  <li>Tip</li>
  <li>Tip</li>
  <li>Tip</li>
</ol>

Я бы хотел, чтобы другие упорядоченные и неупорядоченные списки на странице использовали стандартное форматирование.Только там, где перед ним стоит H3 «Вашего контрольного списка», я хочу, чтобы они были в стиле.

Спасибо

Answer 1

Вы можете использовать :contains и next:

$(function() {
  $("h3:contains(Your checklist.)").next("ol").addClass("special");
});

ol {
  border: 1px solid black;
}

ol.special {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ol>
  <li>Skipped</li>
</ol>
<h3>Your checklist.</h3>
<ol>
  <li>Tip</li>
  <li>Tip</li>
  <li>Tip</li>
  <li>Tip</li>
</ol>
<h3>Another Heading</h3>
<ol>
  <li>Skipped</li>
</ol>

Answer 2

Просто сделай это, например.с JQuery:

$(document).ready(function() {
    $("h3").each(function() {
        if ($(this).text() == "Your checklist.") {
            var list = $(this).next("ol");
            // code to change styles or add classes to "list" goes here
        }
    });
});