在单击元素之前获取最后一个h1标记

Question

When a user clicks an element on a page, I need to find the closest h1 tag above the clicked element and get it's html content.

Given the below 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>

I tried:

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

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

});

But text ends up undefined as it doesn't find the h1 tag

Expected result: function should alert "This is header 1"

jsfiddle

Answer 1

closest should be used to get the closest parent of the element, then get the previous sibling :

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

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

Answer 2

您也可以使用父母

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