Choosing a <p> in a div using jQuery

Question

I want to select the second <p> and create it in the itemize class. Here is an example HTML:

 <div class="itemize"> <p> Order Summery</p> <div> <p><strong>Packages:</strong> </p> <!-- i want to select this P tag--> <p><strong>Date:</strong> </p> <p><strong>Style:</strong> </p> </div> </div> 

I want to select and create the first <p> , which is immediately after the second <div> . The second <p> has no identifier or class.

How can I select it through jQuery?

Answer 1

You can do this:

 $('.itemize > div > p:eq(0)') 

.itemize > div goes to:

 <div class="itemize"> <p> Order Summery</p> </div> 

AND

.itemize > div > p:eq(0)

 <div class="itemize"> <p> Order Summery</p> <div> <p><strong>Packages:</strong> </p> </div> </div> 

> allows you to orient direct children, while eq(index) used to get the first p you want.

Answer 2

 $('.itemize div p:first').html() 

Check out this link: http://jsfiddle.net/QJTYx/

If you want to add a class to this p tag:

 $('.itemize div p:first').addClass('selected'); 

Answer 3

 var test = $('.itemize')​.find('div:first')​.find(​'p:first')​​​.html(); alert(test);​ 

Try it here: http://jsfiddle.net/arvind07/H8vwA/

Answer 4

 $('.itemize>div>p:first').addClass('someClass'); 

Answer 5

That should do the trick

 $('.itemize div p').first().addClass('hello'); 

Answer 6

$('.itemize>div>p').first().css(styles go here) most of the above works also work

JQuery selectors work a bit like a css selector, see the tutorial for more information.

Answer 7

You can try this.

 $(".itemize div p:first").text(); 

hope it works.