使用Javascript获取HTML ul列表中的列表项索引

时间:2010-10-27 11:20:23

标签: javascript dom

我有以下HTML页面:

<html>
    <head>
        <script type="text/javascript" src="JavaScript/Menu.js"></script>
    </head>
    <body>
        <ul>
            <li><a onclick="GetIndex(this)">One</a></li>
            <li><a onclick="GetIndex(this)">Two</a></li>
            <li><a onclick="GetIndex(this)">Three</a></li>
            <li><a onclick="GetIndex(this)">Four</a></li>
        </ul>
    </body>
</html>

和Menu.js javascript:

function GetIndex(sender)
{   
    var aElements = sender.parentNode.parentNode.getElementsByTagName("a");
    var aElementsLength = aElements.length;

    var index;
    for (var i = 0; i < aElementsLength; i++)
    {
        if (aElements[i] == sender) //this condition is never true
        {
            index = i;
            return index;
        }
    }
}

为什么注释条件从未达到?如何在Javascript中比较两个HTML元素是否相等?谢谢你的帮助。

5 个答案:

答案 0 :(得分:7)

  

“您的代码是正确的”

答案 1 :(得分:1)

尝试使用:

if(aElements [i] === sender)

而不是

if (aElements[i] == sender) 

答案 2 :(得分:1)

Old Post,但这是一个快速执行此功能的功能:

function nodeIndex(el) {
    var i=0;
    while(el.previousElementSibling ) {
        el=el.previousElementSibling;
        i++;
    }
    return i;
}

这应该使用元素引用作为参数。它基本上只返回前一个兄弟姐妹的数量。

答案 3 :(得分:0)

您确定在锚标记上的点击事件上执行GetIndex函数吗?

尝试将href属性赋予锚标记。你可以写

<a href="#" onclick="GetIndex(this)">One</a>

<a href="javascript:void(0)" onclick="GetIndex(this)">One</a>

这是工作示例http://jsfiddle.net/QfRSb/

答案 4 :(得分:0)

Jquery可以帮助您使用prevAll()

$(document).on("click","li",function(){
 var index=$(this).prevAll();
 alert(index);
});