Selecting within a div using jQuery

Question

I want to select the second  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  which is immediately after the second <div>. The second  has no ID or class.

How can I select it via jQuery?

thanks this works but i have an other issue now.. :S. basicall the structure is the same but js file include another P before it select some thing then its change to Packages. how can i do that. like first p coming from js select your order when i select some thing it changes via jquery to Packages: . how can i add class to the second appeared P — Mossawir Ahmed
– Mossawir Ahmed, Commented Jun 18, 2012 at 7:31
In future, please spend more time writing or formatting your post. Formatting help can be found here — Matt
– Matt, Commented Jun 18, 2012 at 10:24

VibhaJ · Accepted Answer · 2012-06-18 08:00:08Z

15

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

edited Jun 18, 2012 at 8:00

answered Jun 18, 2012 at 6:43

VibhaJ

2,25619 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Fabrício Matté Over a year ago

Links are not answers. At least copypasta your line of JS in the answer as well. Taken from meta:

Link-only answers can be actively harmful if links break. And they do break, even on sites that are seemingly going to be around forever.

. Thanks for the update. :)

Mossawir Ahmed Over a year ago

thanks this works but i have an other issue now.. :S. basicall the structure is the same but js file include another P before it select some thing then its change to  Packages. how can i do that. like first p coming from js select your order when i select some thing it changes via jquery to Packages: .

VibhaJ Over a year ago

Do you just want to add class to first p tag?? If yes then i have updated code here. jsfiddle.net/QJTYx/4

Talha Awan · Accepted Answer · 2017-07-17 21:32:15Z

8

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.

edited Jul 17, 2017 at 21:32

Talha Awan

4,6194 gold badges27 silver badges40 bronze badges

answered Jun 18, 2012 at 6:43

Sarfraz

384k81 gold badges561 silver badges613 bronze badges

Comments

Arvind Bhardwaj · Accepted Answer · 2012-06-18 06:42:32Z

6

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

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

answered Jun 18, 2012 at 6:42

Arvind Bhardwaj

5,3215 gold badges38 silver badges50 bronze badges

Comments

abuduba · Accepted Answer · 2012-06-18 06:41:55Z

2

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

answered Jun 18, 2012 at 6:41

abuduba

5,0637 gold badges29 silver badges43 bronze badges

Comments

maček · Accepted Answer · 2012-06-18 06:42:58Z

2

This should do the trick

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

answered Jun 18, 2012 at 6:42

maček

78k37 gold badges172 silver badges200 bronze badges

Comments

Wahid4sap · Accepted Answer · 2012-06-18 06:46:39Z

2

You can try this..

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

hope it will works..

answered Jun 18, 2012 at 6:46

Wahid4sap

2272 silver badges10 bronze badges

Comments

jakee · Accepted Answer · 2012-06-18 06:45:13Z

1

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

answered Jun 18, 2012 at 6:45

jakee

18.6k3 gold badges39 silver badges42 bronze badges

Collectives™ on Stack Overflow

Selecting <p> within a div using jQuery

7 Answers 7

3 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

3 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related