Получить последний тег h1 перед нажатием элемента

Question

Когда пользователь нажимает на элемент на странице, мне нужно найти тег ближайшего h1 над элементом, который нажал, и получить его содержимое html.

Учитывая ниже HTML:

<div> 
    <h1>This is header 1</h1> 
    <div> 
    <span> some text</span><br> 
    <span> some text</span><br> 
    <span> some text</span><br> 
    <span style="color:red;" class="myClass"> CLICK ME</span><br> 
    <span> some text</span><br> 
    <span> some text</span><br> 
    </div> 
    <h1>This is header 2</h1> 
    <div> 
    <span> some text</span><br> 
    <span> some text</span><br> 
    <span> some text</span><br> 
    <span> some text</span><br> 
    <span> some text</span><br> 
    <span> some text</span><br> 
    </div> 
</div> 

Я попытался:

$("body").on('click', '.myClass', function() { 

     var text=$(this).closest("h1").html(); 
     alert(text); 

}); 

text Но заканчивает undefined как он не находит тег h1

Ожидаемое результат: functio п должно насторожить "Это заголовок 1"

jsfiddle

Answer 1

closest следует использовать, чтобы получить наиболее близкое родителя элемента, а затем получить previous sibling:

var text = $(this).closest('div').prev('h1').text(); 

DEMO:http://jsfiddle.net/son6v8g3/3/

Answer 2

Вы также можете использовать parents

var heading = $(this).parents('div:first').prev('h1').text()