使用Jquery在父div中选择孙子

Question

Below is the code I am working with, as you can see, there is an id named "parent" and an id named "grandchilden". My goal is to get the content inside of this div "grandchildren". How can I achieve it?

I've tried $(this).closest('.grandchildren') , but didnt work.

<div id="parent">
  <a href="#">
    <div>
      <p id="grandchildren">
        This is a content
      </p>
    </div>
  </a>
</div>

Answer 1

If you have a ID on that div you can use $('#grandchildren').html()

If you don't have a ID for it, what is the pattern? div > a > div > p ? In that case you can use this:

$('div#parent > a > div > p').html();

Demo here

Please notice the difference between .text() and .html() , if you just need to get text use .text() instead of .html()

If you have a reference like this you could use find which searches downwards, with the selected element as starting point:

$(this).find('.someClass')

Answer 2

$('#parent').find('#grandchildren').text();