Ad
Style Ordered List Adjacent To Any Heading With Specific Content With JQuery/JS
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
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
Ad