日期:2014-05-16  浏览次数:20318 次

JS的DOM问题求教
如下:
JScript code
<div>
 <ul id="test">
  <li onmouseover="taskIndex();">这是第一个LI</li>
  <li onmouseover="taskIndex();">这是第二个LI</li>
  <li onmouseover="taskIndex();">这是第三个LI</li>
  <li onmouseover="taskIndex();">这是第四个LI</li>
  <li onmouseover="taskIndex();">这是第五个LI</li>
 </ul>
<div>


当鼠标指向的时候,弹出提示当前是ID=TEST元素的子元素的第几个,比如第一个LI显示0,第二个LI显示1,是怎么获知的?

------解决方案--------------------
<div>
 <ul id="test">
<li onmouseover="taskIndex(this);">这是第一个LI</li>
<li onmouseover="taskIndex(this);">这是第二个LI</li>
<li onmouseover="taskIndex(this);">这是第三个LI</li>
<li onmouseover="taskIndex(this);">这是第四个LI</li>
<li onmouseover="taskIndex(this);">这是第五个LI</li>
 </ul>
<div>
<script>
function taskIndex(li){
var list=li.parentNode.getElementsByTagName("li");
for(var i=0;i<list.length;i++){
if(list[i]==li){
alert("这是第"+(i+1)+"个LI");
break;
}
}
}
</script>
------解决方案--------------------
顶一楼,二楼虽然代码简洁,不过兼容性较差,只适合IE浏览器
------解决方案--------------------
HTML code
<script> 
function taskIndex(o){
    var li = document.getElementById("test").getElementsByTagName("li");
    
    for(var i = 0, len = li.length; i < len; i++){ 
        if(li[i] == o){ 
            alert("这是第"+(i+1)+"个LI"); 
            return;
        } 
    }
}
</script>

<div>
 <ul id="test">
  <li onmouseover="taskIndex(this);">这是第一个LI</li>
  <li onmouseover="taskIndex(this);">这是第二个LI</li>
  <li onmouseover="taskIndex(this);">这是第三个LI</li>
  <li onmouseover="taskIndex(this);">这是第四个LI</li>
  <li onmouseover="taskIndex(this);">这是第五个LI</li>
 </ul>
</div>