JQuery Find the first straight type type

Question

I am looking for a way to find the first direct child of an element of the exact type.

Imagine this markup:

<div id="mainDiv"> <div id="otherDiv"> <p> Stuff </p> </div> <p> Stuff 2 </p> <p> Stuff 3 </p> </div> 

So here I want to get "Stuff 2" so that the first paragraph is a direct child.

If I use jquery, I do something like $('#mainDiv').find('p:first'); I will get a paragraph inside the first div.

I need to ignore nested children and accept only the first line. How can I do it?

Answer 1

Use the direct child selector >

 $('#mainDiv > p:first') 

or even children()

 $('#mainDiv').children('p').first()