Getting undefined from jquery find() in my example

I have an HTML page like this :

I have put an event on input.global_filter using jquery as follows:

$('input.global_filter').on('keyup click', function() {
  document.write($(this).find('.example:first').prop('tagName'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Table3–>

<table class=“example” data-column=“3”>

…

</table>
<table>

<tbody>

<tr>

<td>

<input type=“text” class=“global_filter”>

</td>

</tr>

</tbody>

</table>
<!-- Table1–>

<table class=“example” data-column=“1”>

…

</table>
<!-- Table2–>

<table class=“example” data-column=“2”>

…

</table>

This results in undefined. It should give the result TABLE. Where am I wrong ?

#jquery #html