{"id":4661,"date":"2014-04-14T23:11:03","date_gmt":"2014-04-15T06:11:03","guid":{"rendered":"http:\/\/g-liu.com\/blog\/?p=4661"},"modified":"2014-04-16T15:33:27","modified_gmt":"2014-04-16T22:33:27","slug":"walkthrough-making-a-self-updating-table-of-contents-with-jquery","status":"publish","type":"post","link":"https:\/\/g-liu.com\/blog\/2014\/04\/walkthrough-making-a-self-updating-table-of-contents-with-jquery\/","title":{"rendered":"Walkthrough: Making a self-updating table of contents with jQuery"},"content":{"rendered":"

Recently, I had a problem where I had to make a Table of Contents out of the headings on a page. This would be a trivial task if we could just list out all the headings in one flat list:<\/p>\n

\r\nvar headings = $('h1, h2, h3, h4, h5, h6');\r\nvar listWrapper = $('#toc'); \/\/ the container where our table-of-contents goes\r\nvar counter = 0;\r\n\r\nheadings.each(function() {\r\n    $(this).attr("id", "h" + (++counter));\r\n    var li = $('<li><\/li>')\r\n        .append($('<a><\/a>')\r\n            .attr( { "href" : "#" + $(this).attr("id") } )\r\n            .html($(this).html());\r\n         ); \/\/ this creates the list item, and links it to the appropriate header\r\n    \r\n    listWrapper.append(li);\r\n} );\r\n<\/pre>\n
This would generate a straight list of all the headings on the page, with no apparent hierarchical order. It would also work with any heading <h1><\/code> to <h6><\/code>. If you’re not concerned with hierarchical order, this will work beautifully.<\/p>\n
However, 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\"<\/a><\/p>\n
The 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
\r\nvar headings = $('h1, ... , h6');\r\nvar previousLevel = 0;\r\nvar list = $("#myList");\r\nvar result = list;\r\nfor(all headings) {\r\n\tvar level = $(this).level; \/\/ get the numeral part of the <h_> tag.\r\n\tvar li = \/\/ make the list item\r\n\tif(level &gt; previousLevel) {\r\n\t\t\/\/ start a new level, and add the list item\r\n\t}\r\n\telse if(level &gt; previousLevel) {\r\n\t\t\/\/ append a list-item to a parent list\r\n\t}\r\n\telse if(level == previousLevel) {\r\n\t\t\/\/ append a list-item to the current list\r\n\t}\r\n\t\/\/ update previous level\r\n\tpreviousLevel = level;\r\n}\r\n<\/pre>\n
Now we can extrapolate this pseudocode to actual operations. Here’s what’s going to be tricky:<\/p>\n