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>

使用jQuery / JS与任何具有特定内容的标题相邻的样式排序列表

2 个答案: