jquery if div id has children

Question

This if-condition is what's giving me trouble:

if (div id=myfav has children) {
   do something
} else {
   do something else 
}

I tried all the following:

if ( $('#myfav:hasChildren') ) { do something }
if ( $('#myfav').children() ) { do something }
if ( $('#myfav:empty') ) { do something }
if ( $('#myfav:not(:has(*))') ) { do something }

Peachey

Answer 1

if ( $('#myfav').children().length > 0 ) {
     // do something
}

This should work. The children() function returns a JQuery object that contains the children. So you just need to check the size and see if it has at least one child.

Vincents

Thanks for the answer. This is is what worked for me. I knew I was on the right track with the .children(), but didn't know what was wrong with it. Apparently size could be 0, makes sense. – Peachey

If you add a selector to children, you can also check if an element has children that match a particular selector, like if you want to see if an element has a child of a particular class. – Stichomythia

minor issue. don't mean to nitpick but children().length should be called instead of size() per jQuery docs here: api.jquery.com/size – Giacomo

And what if the node only contains text!? – Longhair

@sirwilliam The node will return with 0 length. – Velour

Answer 2

This snippet will determine if the element has children using the :parent selector:

if ($('#myfav').is(':parent')) {
    // do something
}

Note that :parent also considers an element with one or more text nodes to be a parent.

Thus the div elements in <div>some text</div> and <div><span>some text</span></div> will each be considered a parent but <div></div> is not a parent.

Willis

+1 for the informative explanation, although it didn't work out for me since my code is one of those exceptions where I do have spaces and new lines remnants of old removes. Good info though. – Peachey

Yes, I think this answer is more elegant than S Pangborn's. Both are completely legit though. – Stroganoff

I know this is old, but would ($('#myfav :parent').length > 0) be faster? I find yours more readable so it probably isn't worth the trade off in most situations. – Interlining

@Milo LaMar, I'd suspect there isn't much of a performance difference, but the only way to be sure is to try it! Also, you'd have to remove the space between #myfav and :parent in your example, otherwise the selector isn't the same as what my answer would provide. – Willis

A very small amount of reading answered enough for me. Taken from api.jquery.com/parent-selector Additional Notes: Because :parent is a jQuery extension and not part of the CSS specification, queries using :parent cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. To achieve the best performance when using :parent to select elements, first select the elements using a pure CSS selector, then use .filter(":parent"). – Interlining

performance test results in 0.002s - i prefer this way, because it's best readable... – Headlock

I'm confused, isn't this the best answer? – Sinner

Important note: the :parent selector takes into account any text nodes -- which includes white space -- so .is(':parent') is true if you had a single space, like <div> </div>. – Ridden

Answer 3

Another option, just for the heck of it would be:

if ( $('#myFav > *').length > 0 ) {
     // do something
}

May actually be the fastest since it strictly uses the Sizzle engine and not necessarily any jQuery, as it were. Could be wrong though. Nevertheless, it works.

Stroganoff

Answer 4

and if you want to check div has a perticular children(say <p> use:

if ($('#myfav').children('p').length > 0) {
     // do something
}

Markup

Answer 5

You can also check whether div has specific children or not,

if($('#myDiv').has('select').length>0)
{
   // Do something here.
   console.log("you can log here");

}

Hyetograph

Answer 6

There's actually quite a simple native method for this:

if( $('#myfav')[0].hasChildNodes() ) { ... }

Note that this also includes simple text nodes, so it will be true for a <div>text</div>.

Exploratory

$(...)[0] is undefined this may happen if #myfav is not found. I'd test the existence of the first matched element prior to apply that condition, i.e.: $('#myfav')[0] && $('#myfav')[0].hasChildNodes(). – Kith

Answer 7

The jQuery way

In jQuery, you can use $('#id').children().length > 0 to test if an element has children.

Demo

var test1 = $('#test');
var test2 = $('#test2');

if(test1.children().length > 0) {
    test1.addClass('success');
} else {
    test1.addClass('failure');
}

if(test2.children().length > 0) {
    test2.addClass('success');
} else {
    test2.addClass('failure');
}

.success {
    background: #9f9;
}

.failure {
    background: #f99;
}

<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<div id="test">
   <span>Children</span>
</div>
<div id="test2">
   No children
</div>

---

The vanilla JS way

If you don't want to use jQuery, you can use document.getElementById('id').children.length > 0 to test if an element has children.

Demo

var test1 = document.getElementById('test');
var test2 = document.getElementById('test2');

if(test1.children.length > 0) {
    test1.classList.add('success');
} else {
    test1.classList.add('failure');
}

if(test2.children.length > 0) {
    test2.classList.add('success');
} else {
    test2.classList.add('failure');
}

.success {
    background: #9f9;
}

.failure {
    background: #f99;
}

<div id="test">
   <span>Children</span>
</div>
<div id="test2">
   No children
</div>

Etti