CODEWITHSUNDEEP
javascriptjquery
Henrik Petterson
Henrik Petterson

Reputation: 7094

.find() top level <p> tags within div

I have the following layout:

<div class="container">
  <p> target </p>
  <p> target </p>
     <div>
       <p> not target </p>
     </div>
</div>

My question is, how do I target all the top level <p> tags (see target) using .find()?

I can target all the <p> tags by:

jQuery(this).find("p"); // 'this' is .container

And I can target the first <p> tag by: 

jQuery(this).find("p").first();

But I want to target both the top level <p> tags in .container.

Using CSS, I can do this by: .container > p

Upvotes: 3

Views: 90

Answers (3)

chrismillah
chrismillah

Reputation: 3914

If using jquery you would use the following selector

$(".container > p");

or

 $(".container").find("> p")[0];

for plain javascript you can do

document.querySelectorAll('.container > p');

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

You can either use the CSS direct child selector:

jQuery(this).find("> p");

Or you can use .children()

jQuery(this).children("p");

Upvotes: 5

Rory McCrossan
Rory McCrossan

Reputation: 337580

You can use the direct descendant selector:

$(this).find("> p");

Upvotes: 4

Related Questions