Selecting <p> within a div using jQuery

Question

I want to select the second <p> tag and style it within a itemize class div. Here is the 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 style the first <p> which is immediately after the second <div>. The second <p> has no ID or class.

How can I select it via jQuery?

Answer 1

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

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

Answer 2

You can do this way:

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

.itemize > div goes till:

<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>

The > allows to target direct children whereas eq(index) is used to get first p that you want.

Answer 3

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

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

If you want to add class to that p tag:

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