how do I programmatically create anchors for my page headers?

Question

I have several headers on a page, and I need to populate a navigation box on each page that links to the appropriate anchor."

However none of my headers are anchored. 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>');
    });
}