使用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

就这样做，如。使用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
        }
    });
});

Answer 2

您可以使用: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>

​