<h1><\/code> to <h6><\/code>. If you’re not concerned with hierarchical order, this will work beautifully.<\/p>\nHowever, what if we have to generate a hierarchical table of contents, like what Wikipedia does in its articles? This is a bit of a tricky problem, as header tags are not nested. An h2<\/code> can appear at any level in the DOM in relation to an h6<\/code> tag. With no sense of inherent hierarchical order in the heading tags, how do we make a hierarchical structure?
\n
\nInstead of a straight up list, we’ll use a nested list. This list can be ordered, or unordered, but it would give the end user a sense of the structuring of the document. One example of a list could be like this:<\/p>\n![\"wikipedia-toc\"](\"http:\/\/g-liu.com\/blog\/wp-content\/uploads\/2014\/04\/wikipedia-toc.png\")
<\/a><\/p>\nThe numerical value of the heading tag would correspond to the depth of the list-item in the table of contents. Now, we can write a pseudocode skeleton for our table of contents generator.<\/p>\n[code language=”javascript”]\nvar headings = $(‘h1, … , h6’);
\nvar previousLevel = 0;
\nvar list = $("#myList");
\nvar result = list;
\nfor(all headings) {
\n\tvar level = $(this).level; \/\/ get the numeral part of the <h_> tag.
\n\tvar li = \/\/ make the list item
\n\tif(level > previousLevel) {
\n\t\t\/\/ start a new level, and add the list item
\n\t}
\n\telse if(level > previousLevel) {
\n\t\t\/\/ append a list-item to a parent list
\n\t}
\n\telse if(level == previousLevel) {
\n\t\t\/\/ append a list-item to the current list
\n\t}
\n\t\/\/ update previous level
\n\tpreviousLevel = level;
\n}
\n[\/code]\n
Now we can extrapolate this pseudocode to actual operations. Here’s what’s going to be tricky:<\/p>\n
\n- keeping track of the depth that we’re at<\/li>\n
- going back\u00a0up<\/em> to a previous level<\/li>\n
- making sure list-items are being inserted at the correct level<\/li>\n<\/ul>\n
To solve the first problem, we use a jQuery variable, result<\/code>, to keep track of the list item that we’re currently using. For every traversal through the loop, we can append a new list to result<\/code>, we can append a list item after result<\/code> (to the current list), or we can append a list item to a higher-level list. After this, we update result<\/code> to the list-item that we added.<\/p>\n\n- Start a new list, append
li<\/code> to list:<\/strong> result.append($('<ul><\/ul>').append(li));<\/code><\/li>\n- Append
li<\/code> to the current list:<\/strong> result.parent().append(li);<\/code><\/li>\n- Append
li<\/code> to a higher-level list:<\/strong> result.parent('ul:eq(' + level + ')').append(li);<\/code><\/li>\n<\/ul>\n