Question

i have this code:

    <nav role="nav" id="primary-nav" class="overview">
    <h3 class="section active">
        <span class="menu-toggle open"></span>
        <span data-content="the-basics">The Basics</span>
    </h3>
        <ul class="active">
            <li><a href="#" class="nav-link" data-content="0">Introduction</a></li>
            <li><a href="#" class="nav-link" data-content="1">A Chapter in the Zeitgeist Movement</a></li>
        </ul>
    <h3 class="section">
        <span class="menu-toggle"></span>
        <span data-content="setting-up-a-national-chapter">Setting up a National Chapter</span>
    </h3>
    <ul>
        <li><a href="#" class="nav-link" data-content="0">Gathering Volunteers &amp; Social Media</a></li>
    </ul>
</nav>

and this javascript code

  // Load page
  $('a.nav-link').on('click', function( event ) {
      event.preventDefault();
      var $this = $(this);
      var parent = this.parentNode;
      console.log(parent);
      var dataContent = $this.attr("data-content");
      console.log(dataContent);
  });

what is the correct way to get the data-content=”” of the parent H3 span for this specific section, for example i want to return the “the-basics” in the The Basics

any advice much appreciated.

Answer 1

var dataContent =  $this.closest('ul').prev('h3').find('span[data-content]').data('content'); // the-basics