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