jQuery return true or false if a div contains a <p> tag

Question

Let's see:

<div><p>this div contains a p tag</p></div>
<div>this one is not</div>

How do i assign a variable with a boolean value (true or false) if a div contains a specific tag like p in the above example?

Answer 1

$("div:has(p)").addClass("has-paragraph");

will add a class to all divs that contain p children. If the paragraphs aren't direct children, this won't pick them up.

Note: doing this:

$("div p").addClass("has-paragraph");

will add the class to the paragraph not the div. You can fix that by doing this:

$("div p").parents("div").addClass("has-paragraph");

but this will catch multiple div ancestors. You could do this:

$("div p").parents("div:first").addClass("has-paragraph");

to fix that.

Or more programmatically:

$("div").each(function() {
  if ($(this).find("p").length > 0) {
    // do stuff
  }
});

Answer 2

Give your div an ID, then:

if($('#myDiv p').length) {
    alert('I have a paragraph');
}

Answer 3

var result = ($('div p').size() > 0);

or

var result = ($('div p').length > 0);

This will grab any p inside any div. This is basically what @karim79 has.