1

I have a DOM structure with div, p and span tags. I want to count the 'p' tags with children nodes and that without any children. I read a solution in this forum, but it doesn't work for me: How to check if element has any children in Javascript?. Fiddle demo 

$('#test').blur(function(){ var test= $('.check p').filter(function (){ if ($(this).childNodes.length > 0) return this }); alert(test.lenght) })
Improve this question
1
  • 1
    First: childNodes is a property of a html element $(this) turns the html element in a jQuery object and jQuery object doesn't have a childNodes property. Second: would you like to check actual content? childnodes will return whitespace (new line characters, spaces and tabs) as a childNode so while there isn't actually any content in there it'll still return true. Commented Jun 20, 2013 at 3:30

3 Answers 3

Reset to default
1

it should be

$('#test').blur(function(){ var test= $('.check p').filter(function (){ return this.childNodes.length > 0; // as HMR pointed out in the comments if you are looking for child elements then $(this).children().length will do }) alert(test.length) })

Demo: Fiddle

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

6 Comments

It's a bit more complicated than that if you want to check if there is any visible content. An Html element containing whitespace will have childNodes but there won't be any visible content. I know the op askes for the existence of childNodes but for future reference it's a bit more tricky to check for actual content.
@HMR in that case I think .children().length will be a better choice
that will produce a false negative when a p element contains only text. The answer rightly addresses the question but if you're checking for content rather than Elements or Nodes than you have to check like (p.childNodes.length===1)?p.childNodes[0].textContent.trim()!=="":p.childNodes.length>0; (not sure if textContent and trim are available on all IE browsers)
@HMR yes in that case the question is whether text is considered as a child node?
And for textContent there is $(p).text() so it'll be something like $.trim($(p).text())!=="" to check if a p element has content.
|
1

Did you try this?

$('p:empty')

Should select all your empty p tags.

$('p').not(':empty')

Should select all your non empty p tags.

Improve this answer

3 Comments

$('p').not(':empty') will return p elements that contain only whitespace.
True that! Tried a fiddle but doesn't work as expected. Could you please make this better?
To check for content rather than nodes or elemens you can do something like: (p.childNodes.length===1)?p.childNodes[0].textContent.trim()!=="":p.childNodes.‌​length>0 Still would not give false positive when p has an empty <span> so maybe p.textContent.trim()!=="" would be best.
0

Here: http://jsfiddle.net/QN3aM/9/

$('#test').blur(function () { var test = $('.check p').filter(function () { return ($(this).children().length) }); alert(test.length); })

You just need to return true within filter, 0 is a falsey value and anything else will be truthy. also you spelt length wrong.

childNodes is a property of an element. as you were converting the element into a jquery object, you'd have to use the jquery method children()

Improve this answer

3 Comments

Note that a p elment that contains only text will return as having no content (children). For exapmle the first p element contains only text then ($($("p")[0]).children().length===0===true)
I guess I assumed (based on the example html in his fiddle) that he would be looking for elements rather than text content, I could be wrong.
The answer is right, just warning for future reference that checking for content is a bit more work then counting childNodes. A childNode can be whitespace only (will produce a false having content) an element can have only text (will produce a false negative when checking children)