How to select child elements under id in jQuery

Question

Sample code:

  
heading 1
  
heading 2
  
paragraph



        

Answer 1

You can simply implement the exact same selector:

$('#container h1')

Which selects every h1 element found within the #container element, or:

$('#container > h1')

Which selects only those h1 elements that have the #container element as their parent (not grandparent, or other form of ancestor).

Or, if you prefer:

$('#container').find('h1')

You could also restrict it to a particular h1 element:

$('#container h1:first')

Which selects only the first h1 element within the #container element.

References:

• find().
• :first selector.
• jQuery selectors.