Why the following code does not alert me all the child elements?
<p>Based on the posiiotn of the shild elements, I want to get their IDS.However,the alert messages display me the child id and the parent id,then again a child id and the parent <code>id</code>.
<code>Child1</code>,<code>parent</code>,<code>child3</code>,<code>parent</code>,<code>child5</code>,<code>parent</code>,<code>child7</code>,<code>parent</code>..
Why is it skipping the child id to display me the parant 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" width="200px"&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 child_id,child_width,child_X,child_Y;
    for (i = 0;i&lt;child;i++){

            child_id = $('#parent').children().eq(i).attr('id');
            child_width = $('#parent').children().eq(i).width();
            child_X = $('#parent').children().eq(i).position().left;
            child_Y = $('#parent').children().eq(i).position().top;
            //alert(child_X);
            test(child_X,child_Y);
        }

function test(x,y){

    var elem = document.elementFromPoint(x,y);
    var $el = $(elem);
    alert($el.attr('id'));
}

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