Question

基于shild元素的posiiotn，我想得到他们的IDS.However，警告消息显示子id和父id，然后再显示子id和父id。 Child1，parent，child3，parent，child5，parent，child7，parent .. 为什么跳过子ID以显示parant 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>

Answer 1

我认为这是因为margin-left:30px。这意味着此元素不在您期望的30px坐标处。边距空间不被视为元素的一部分。您可以使用border：border-left: 30px solid #fff或其他内容代替边距。

经过测试，至少对我有效：）

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

1 个答案: