为什么以下代码不会提醒我所有子元素？

如何解决为什么以下代码不会提醒我所有子元素？

| 我希望基于shild元素的位置来获取其IDS。但是，警报消息会向我显示子ID和父ID，然后再次显示子ID和父“ 0”。 Child1，parent，child3，parent，child5，parent，child7，parent.. 为什么跳过子ID为我显示父母ID？

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

<script type=\"text/javascript\"  src=\"jquery.js\">  </script>
<style type=\"text/css\">
#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}
</style>


</head>

<body>
<div id=\"parent\">
<div id=\"child1\" width=\"200px\"></div>

<div id=\"child2\"></div>

<div id=\"child3\"></div>

<div id=\"child4\"></div>

<div id=\"child5\"></div>

<div id=\"child6\"></div>

<div id=\"child7\"></div>

<div id=\"child8\"></div>
</div>

<script type=\"text/javascript\">

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

    var child_id,child_width,child_X,child_Y;
    for (i = 0;i<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\'));
}

</script>
</body>
</html>

解决方法

我想是因为10英镑。这意味着此元素不在您期望的30px坐标处。边距空间不被视为元素的一部分。可以使用border：border-left: 30px solid #fff或类似的东西来代替空白。经过测试，它至少对我有用:)