Question

When I click on an anchor in an li tag, I would like to identify the index of the h3 tag that precedes it. For example, if I were to click on overview, I would like to get the index of Introduction. How would I accomplish this with Jquery?

<h3><a href="Introduction" rel="address:/Introduction">Introduction</a></h3>
<div class="navigation primary_navigation">
    <ul>
        <li><a href="purpose" rel="address:/purpose">Purpose</a></li>
        <li><a href="overview" rel="address:/overview">Overview</a></li>
    </ul>
</div>
<h3><a href="Incorporate_Learning" rel="address:/Incorporate_Learning">Incorporate Learning</a></h3>
<div class="navigation primary_navigation">
    <ul>
        <li><a href="appraise" rel="address:/appraise">Appraise</a></li>
        <li><a href="select" rel="address:/select">Select</a></li>
        <li><a href="define" rel="address:/define">Define</a></li>
        <li><a href="execute" rel="address:/execute">Execute</a></li>
        <li><a href="resources" rel="address:/resources">Resources</a></li>
    </ul>
</div>

Answer 1

$(function () {
    $("li a").click(function (e) {
        e.preventDefault();
        var $h3 = $(this).closest(".primary_navigation").prev();
        console.log($("h3").index($h3));
    });
});