How do I programmatically create anchors for my page headers?

Question

I have several headings per page, and I need to fill out a navigation window on each page that refers to the corresponding anchor.

However, none of my headings are attached. I have too many pages to do this manually. can anyone come up with a clean jquery solution?

Answer 1

function addAnchors(){ //loop through all your headers $.each($('h1'),function(index,value){ //append the text of your header to a list item in a div, linking to an anchor we will create on the next line $('#box-anchors').append('<li><a href="#anchor-'+index+'">'+$(this).html()+'</a></li>'); //add an a tag to the header with a sequential name $(this).html('<a name="anchor-'+index+'">'+$(this).html()+'</a>'); }); } 

Answer 2

Actually, you can associate all tags with an identifier. Thus, reading the identifier h1 and / or setting them will do this and lead to a cleaner html (without any unexpected css surprises in the future when styling your tag).