How to check if an element has any child elements using jquery?

Question

I have a div that floats to the left and the other to the right. I want to check if a floating point div element has a children element; if it has no visible element, I want to apply a new class to the left div. See below:

<div id="leftContent" class="left "> <table></table> </div> <div id="rightContent" class="content"> //the dom has no visible element //"#ctl00_ContentPlaceHolder1_ somegridView" is not visible </div> 

And I use the following script:

 $(document).ready(function() { if ($("#ctl00_ContentPlaceHolder1_ somegridView").lenght = 0) { $("# leftContent ").removeClass("left"); $("# leftContent ").addClass("center"); } }); 

---

 div.left { float: left; width: 365px; margin-left: 5px; padding-left: 2px; } div.center { padding: 2px; margin: 5px; float: none; width: 95%; clear: both; } 

If div id="rightContent" empty?

Answer 1

 if ( $("#rightContent").children().length > 0) { // do style changes } 

Answer 2

You can use is with : empty .

 if($('#rightContent').is(':empty')) { } 

Answer 3

Try the following:

 if ($('#rightContent').children().length === 0) { //Whatever } 

EDIT : correct ID