javascript - 如何获取之前的H3标签

Question

我有这个代码：

    <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>

和这个javascript代码

  // 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);
  });

获取此特定部分的父 H3 跨度的 data-content="" 的正确方法是什么，例如，我想在 The Basics 中返回“the-basics”

非常感谢任何建议。

Answer 1

在您给定的示例中，这可能会起作用，但模板更改可能有点脆弱：

$this.closest('ul').prev('h3').children('[data-content]')

Answer 2

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