Question

I want to create an auto-generated navigational menu for a single page website.

<!-- html -->
<section id="home">
</section>
<section id="aboutus">
</section>
<section id="contactus">
</section>
<nav id="nav_menu">
</nav>

// jQuery
<script>
  $(function() {
    $('section').each(function(index) {
      $('#nav_menu').append('<a href="'+$(this).hash+'">&diams;<br /></a>')
    });
  });
</script>

I’d like to create a diamond for each section in the page, where each diamond will have an anchor to the corresponding page.

The problem is $(this).location.hash shows undefined instead of the anchor of the page. I’m not sure about what should I use in order to get the hash of the section.

Answer 1

You are wanting the ID of the section

$('section').each(function(index) {
  $('#nav_menu').append('<a href="#'+this.id+'">&diams;<br /></a>')
});