jquery check if xml element has children?

I know how to use JQuery to iterate over the children of an xml element:

$(this).children('tag_name').each(function() {

});

Is there a convenient way to simply test if an element has any children? Something like this incorrect code:

$(this).hasChildre开发者_运维百科n('tag_name') //returns true or false

Use this method:

var hasChildren = $(this).children('tag_name').length > 0;

$(this).find('tag_name').length > 0 to search between all the descendants $(this).children('tag_name').length > 0 for inmediate children

Is there a convenient way to simply test if an element has any children?

If you are not set on a specific element name, this is the most direct way.

this.childElementCount > 0

You can do -

if ( $(this).children('tag_name').size() > 0 )
{
    // do something
}

For those who value efficiency (and that should be all of us):

If all you need to do is to find out whether your node has ANY child nodes (disregarding type), all you have to do is check

if(this.childElementCount)

like Allain Pannetier suggested. This is pure javascript, which can and should be used for cases like these, even when you have jQuery. (note, there is no $() around this)

For cases where you need to see if there are any DIRECT OR INDIRECT children of certain type, all you have to do is find at least one, in which case the fastest and most efficient jQuery way would be:

$('tag:first-of-type', $(this)).length

which basically finds any first tag in the context of $(this). (could return multiple ones if they are nested, but still faster)

For cases where you need to find ONLY DIRECT children of type, you would use: $(this).children('tag:first-of-type').length

All of the above examples will either return 0 i.e. false or non-zero, i.e. true, so you can use them as true/false statements without comparing to 0 or > 0.

Even faster: provide pure CSS selector to use optimized native search if your this node has a unique id (or other identifier, adjust accordingly), for instance:

$( '#'+this.id+' > tag:first-of-type' ).length for ONLY DIRECT descendants

$( '#'+this.id+' tag:first-of-type' ).length for DIRECT/INDIRECT descendants

DO NOT DO something like $(this).children('tag').length or $(this).find('tag').length if you can avoid it

where appropriate use :first-of-type

The reason for that is the overhead of jQuery creating a children() collection where each and every child will be presented as its own jQuery object. It's a huge and unnecessary overhead if you have a lot of children in the parent node. And you do all that work only to count how many members there are in that collection. And then it will sit in the memory until garbage collected. Normally you don't have to worry about memory (although in busy apps you should) but the process of creating children objects for a resulting jQuery object is the overhead you want to avoid. Only do that if you plan to work with the children of the collection, which means - assign it to a variable that you will reuse.

node.hasChildNodes() has full browser support but fails if there is whitespace or text so not recommended here. node.childElementCount has full support, except for an edge case, which is rarely something you have to worry about, but see notes at caniuse