CODEWITHSUNDEEP
jqueryhtml
Mazhar MIK
Mazhar MIK

Reputation: 1192

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 ?

Upvotes: 2

Views: 102

Answers (3)

jvk
jvk

Reputation: 2201

You have use parents instead of find. Try this:

$(function(){
  $('input.global_filter').on('keyup click', function() {
    console.log($(this).parents().siblings('table').first().prop('tagName'));
    console.log($(this).parents().next('.example').data('column'));
  });
})

Upvotes: 1

Morteza Fathnia
Morteza Fathnia

Reputation: 435

please try with this:

   $('input.global_filter').on('keyup click', function() {
      document.write($('.example').eq(1).prop('tagName'));
    });

Upvotes: 0

Gaurav Joshi
Gaurav Joshi

Reputation: 1054

In the above code you are using $(this) and when event get trigger this become the input field it means this keyword referring to input field, And then you are trying to find example:first inside the input field so you are getting undefined.

Check the following solution 

document.write($('body').find('.example:first').prop('tagName'));

Upvotes: 0

Related Questions