Select previous headings that are not parents of the current element / JQuery

Question

I have the following markup

<div id="section1">
  <h1>Titel 1</h1>
  <p>Some smart Text</p>
</div>
<div id="section2"> 
  <h2>Titel 2</h2>
  <p>Some smart Text2</p>
</div>
<div id="section3-1">
  <h3>Titel 3-1</h3>
</div>
<div id="section3-1content">
  <ul>
     <li id="section3-1content-el1">El1</li>
     <li id="section3-1content-el2">El2</li>
  </ul>
</div>
<div id="section3-2">
  <h3>Titel 3-2</h3>
</div>
<div id="section3-2content">
  <ul>
     <li id="section3-2content-el1">El1</li>
     <li id="section3-2content-el2">El2</li>
  </ul>
</div>

When I click on #section3-2content-el2 I want to get back

 <h3>Titel 3-2</3>

(the nearest h3), then

 <h2>Titel 2</h2> 

and then

 <h1>Titel 1</h1>.

The Problem with it is, that h3, h2 and h1 are not really parents from the clicked element. Is there any way to go back in the sourcecode and find the first h3, then the first h2 and then the first h1?

The Problem with:

$('#section3-2content-el1').click(function(){
  $('#section3-2content-el1').parents('h3');
  $('#section3-2content-el1').prevAll('h3');
  $('#section3-2content-el1').closest('h3');
});

is that they all travel up the dom and look if one is a h3. But the h3 is not a parent of the clicked element.

Answer 1

Demo Fiddle

There are many options. Considering your html structure :last is the best option. Check the demo.

$(this).parents('body').find('h3:last')

If your heading tags were consistent, .prev() would have been another option.

Answer 2

I would do this by using jQuery's .map() method to return an array (or, sort of an array, anyway) of class names. Then you can match the class name of the clicked element to the heading which shares its class name.

First add some classes to the <h3> s and <li> s:

<div id="section1">
    <h1>Titel 1</h1>
    <p>Some smart Text</p>
</div>
<div id="section2"> 
    <h2>Titel 2</h2>
    <p>Some smart Text2</p>
</div>
<div id="section3-1">
    <h3 class="first">Titel 3-1</h3>
</div>
<div id="section3-1content">
    <ul>
        <li id="section3-1content-el1" class="first">El1</li>
        <li id="section3-1content-el2" class="first">El2</li>
    </ul>
</div>
<div id="section3-2">
    <h3 class="second">Titel 3-2</h3>
</div>
<div id="section3-2content">
    <ul>
        <li id="section3-2content-el1" class="second">El1</li>
        <li id="section3-2content-el2" class="second">El2</li>
    </ul>
</div>

And the JS/jQuery:

$(document).ready(function(){
    $('li').click(function(){
        var self = $(this);

        // Create an array of class names
        var cls = $('h3').map(function(){
            return $(this).attr('class');
        });

        // Loop through the array until the current iteration matches the class name of the clicked element
        for (var i = 0; i < cls.length; i++) {
            if (self.hasClass(cls[i])) {

                // Do stuff based on whether there is a match
                alert($('h3.' + cls[i]).attr('class'));
            }
        }
    });
});

FIDDLE: http://jsfiddle.net/KFS4E/