Programatically adding a class to range of list items

Question

I have a table of contents that is generated dynamically via javascript - fetching all the heading tags (H1 to H6) and then placing them into a nav.

When I update some of the sections, I want to be able to send people to the page with highlighting on the TOC for the updated / new sections.

I want to use query strings to be able to target the range of the TOC and where to add some custom styling. I also want to do this in javascript so I can add it as an extension to the codebase where the headings are extracted into the TOC.

What I'm hoping to achieve is:

1. http://localhost:3000/my-document/                 <----- no highlight to the TOC
2. http://localhost:3000/my-document/?start=1&end=6   <----- highlight TOC from <li> #1 to <li> #6 in loop
3. http://localhost:3000/my-document/?start=2&end=4   <----- highlight TOC from <li> #2 to <li> #4 in loop

For the above urls, what I mean is option 1 wouldn't add any styling to the table of contents. Option 2 would add styling to the <li>..<ul><li>.. in the tree from iteration 1 to iteration 6. While option 3 would do the same as option 2 but start at the 2nd li iteration and end at the 4th.

For visual representation (I don't need the styling of the badge circle - more adding a class to the li element):

Option 1:

Option 2:

Option 3:

ul,
li {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  margin-top: 1px;
}

li>ul {
  margin-top: 1em;
  margin-left: 2em;
}

a {
  line-height: 2em;
  background: #2C82C9;
  display: inline-block;
  color: #fff;
  padding: 2px 8px;
  border-radius: 8px;
}

.container {
  max-width: 80%;
  margin: 2em auto;
}

<nav>
  <div class="container">
    <ul>

      <!-- this is li iteration #1 -->
      <li><a>Main menu</a>
        <ul>

          <!-- this is li iteration #2 -->
          <li><a>Sub menu 1</a></li>
          <li><a>Sub menu 2</a>
            <ul>

              <!-- this is li iteration #3 -->
              <li><a>Sub menu 2 / 1</a></li>
              <li><a>Sub menu 2 / 2</a>
                <ul>

                  <!-- this is li iteration #4 -->
                  <li><a>Sub menu 2 / 2 / 1</a></li>
                  <li><a>Sub menu 2 / 2 / 2</a>
                    <ul>

                      <!-- this is li iteration #5 -->
                      <li><a>Sub menu 2 / 2 / 2 / 1</a></li>
                      <li><a>Sub menu 2 / 2 / 2 / 2</a>
                        <ul>

                          <!-- this is li iteration #6 -->
                          <li><a>Sub menu 2 / 2 / 2 / 2 / 1</a></li>
                          <li><a>Sub menu 2 / 2 / 2 / 2 / 2</a>
                        </ul>
                        </li>
                    </ul>
                    </li>
                </ul>
                </li>
            </ul>
            </li>
        </ul>
        </li>
    </ul>
  </div>
</nav>

AJcodez · Accepted Answer · 2021-12-30T01:39:05.850

0

It sounds like this would work:

Parse the query params into highlight range (or null).

Pass in the start and end highlight range to the JavaScript to create the table of contents.

When you are generating the table of contents, check if the section is within the highlight range, if so, include the CSS class.

If you don't have control over the table of contents code, it should still be possible to target the elements that you want with a CSS query.

nav .container li:nth-of-type(n+{start}):nth-of-type(-n+{end}) {
  /* styles */
}

Add CSS to <head> with JavaScript?

edited Dec 30 '21 at 01:39

answered Dec 30 '21 at 01:27

AJcodez

31,780
20
84
118

Sorry I was unclear! I don't have control over the TOC generation, I mean "add in" as an extension to or as separate script. – markb Dec 30 '21 at 01:31
If the TOC will not change over time, it should be possible to target the elements based on the query with a custom stylesheet. I will update the answer. – AJcodez Dec 30 '21 at 01:33
@AJ the TOC does change (well often additions / updates and infrequent deletions). The structure is always in a H1 to H6 format though generating the `ul` and `li` hierarchy if that helps? – markb Dec 30 '21 at 01:36

Programatically adding a class to range of list items

Option 1:

Option 2:

Option 3:

1 Answers1