选择中 <p> 在div中使用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

$('.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');

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

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

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

Answer 4

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

Answer 5

这应该可以解决问题

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

Answer 6

You can try this..

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

hope it will works..

Answer 7

$('.itemize>div>p').first().css(styles go here) most of the ones above work as well

jQuery selectors work a bit like css selectors, check out this tutorial to get more info.