How would I select the first
<p> element in the following
<div> with jQuery?
<div> <h1>heading</h1> <p>How do I select this element with jQuery?</p> <p>Another paragraph</p> </div>
Assuming you have a reference to the
If the first
p will always be a direct child of the
div, you could use
children instead of
Some alternatives include:
$(yourDiv).find("p:eq(0)"); //Slower than the `.eq` method $(yourDiv).find("p:first"); $(yourDiv).find("p").first() //Just an alias for `.eq(0)`
Note that the
eq method will always be the fastest way to do this. Here's the results of a quick comparison of the
:eq selector and
:first selector (I didn't bother with the
first method since it's just an alias of
answer was too short to post without this useless sentence.
Edit This is definitely a slow option. After looking at Jame's speed test, it looks like jQuery selectors work best when they piggy back off of css selectors.
or $('div p:first');
Keep in mind that first() matches only a single element, the :first-child selector can match more than one: one for each parent.
You almost know the answer (from your post title). There is a selector in jQuery called
:first-of-type. Use it to find and add class to the first p tag automatically, like so:
Should work. I think.
This should work
$( "div p:first-of-type" ).css( "font-size: 10px" );
The above code finds the first paragraph in the div as @Denver pointed and changed its
Here is an example that explains even more about jQuery first-of-type selector
©2020 All rights reserved.