CODEWITHSUNDEEP
jquery
Steve Kim
Steve Kim

Reputation: 5591

jQuery Children giving undefined result

So, I have the following markup:

<a class=" rhpcon" href="#">
   <div class="rhccont">Content</div>
</a>


jQuery(document).on( 'click', '.rhpcon', function(e) {  
    var rhccont= jQuery(this).children().find('.rhccont').html();   
    alert(rhccont);                         
});

However, I keep getting "Undefined" as the alert.

I am guessing it is the children that is wrong.

Any suggestions?

Upvotes: 0

Views: 217

Answers (1)

j08691
j08691

Reputation: 207901

You don't need .children() as .find() searches the descendant elements. Use:

var rhccont= jQuery(this).find('.rhccont').html();   


jQuery(document).on('click', '.rhpcon', function(e) {
  var rhccont = jQuery(this).find('.rhccont').html();
  alert(rhccont);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a class=" rhpcon" href="#">
  <div class="rhccont">Content</div>
</a>

You could also use .children() instead of .find() like:

var rhccont= jQuery(this).children('.rhccont').html();

But again, not both together. As the documentation on these functions states:

The .find() and .children() methods are similar, except that the latter only travels a single level down the DOM tree.

Upvotes: 1

Related Questions