Ad

Style Ordered List Adjacent To Any Heading With Specific Content With JQuery/JS

- 1 answer

I've got a bunch of blog posts on a website I'm creating but unfortunately I'm unable to apply custom CSS to the blog posts or add classes to anything on the page.

How can I use JavaScript or jQuery apply CSS styles to any ordered list on the page wherever <h3>Your checklist.</h3> precedes it?

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

I'd like other ordered and unordered lists on the page to use standard formatting. Only where the H3 of 'Your Checklist' precedes it do I want them styled.

Thanks

Ad

Answer

Just do this, eg. with 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
        }
    });
});
Ad
source: stackoverflow.com
Ad