Why it's not displaying me the id of the child elements?
<p>I wanted to get the child element's id using JQuery using the following technique.However, it seems the code cannot be executed in the loop..Why this is happening and how can I get each child's id?</p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;JQuery&lt;/title&gt;

&lt;script type="text/javascript"  src="jquery.js"&gt;  &lt;/script&gt;
&lt;style type="text/css"&gt;
#parent{width:50%;margin:auto;border:#000 thick groove;overflow:hidden;}

#child1{float:left;width:50px;height:50px;background-color:#00F;}

#child2{float:left;width:50px;height:50px;background-color:red;margin-left:30px}

#child3{float:left;width:50px;height:50px;background-color:#00F;}

#child4{float:left;width:50px;height:50px;background-color:red;margin-left:30px}

#child5{float:left;width:50px;height:50px;background-color:#00F;}

#child6{float:left;width:50px;height:50px;background-color:red;margin-left:30px}

#child7{float:left;width:50px;height:50px;background-color:#00F;}

#child8{float:left;width:50px;height:50px;background-color:red;margin-left:30px}
&lt;/style&gt;


&lt;/head&gt;

&lt;body&gt;
&lt;div id="parent"&gt;
&lt;div id="child1"&gt;&lt;/div&gt;

&lt;div id="child2"&gt;&lt;/div&gt;

&lt;div id="child3"&gt;&lt;/div&gt;

&lt;div id="child4"&gt;&lt;/div&gt;

&lt;div id="child5"&gt;&lt;/div&gt;

&lt;div id="child6"&gt;&lt;/div&gt;

&lt;div id="child7"&gt;&lt;/div&gt;

&lt;div id="child8"&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;script type="text/javascript"&gt;

    var child = $('#parent').children().length;

    var chil;
    for (i = 0;i&lt;child;i++){

            chil = $('#parent').children()[i].attr('id');
            alert(chil);
        }

&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
