How to select child elements under id in jQuery
Sample code:
<div id='container'>
<h1>heading 1</h1>
<h2>heading 2</h2>
<p>paragraph</p>
</div>
I would like a jQuery equivalent of this CSS selector to select the h1
element under the div
:
#container h1 {}
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.