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

【问题标题】：Get list item index in HTML ul list using Javascript使用Javascript获取HTML ul列表中的列表项索引
【发布时间】：2010-10-27 11:20:23
【问题描述】：

我有以下 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;
        }
    }
}

为什么评论的条件从未满足？如何比较两个 HTML 元素在 Javascript 中是否相等？感谢所有的帮助。

【问题讨论】：

不要误会，这里的主要目标是得到那个血腥的索引。但是，学习如何使有争议的条件返回 true 将解决这个问题和许多其他难题。
您的代码在 IE 和 Chrome 中对我来说工作得很好，假设您稍微修改它以在条件内使用 index 做一些事情，而不是仅仅返回它。 jsfiddle.net/AndyE/BcSL7
@Andy E：我删除了return index; 行并将alert('Index: ' + index); 添加到函数的末尾，它会导致消息“索引：未识别”。 :(
哇，它现在可以工作了！到底是什么...可能是我的页面或 javascript 被缓存了吗？
任何想在答案中写“你的代码是正确的”的人都会因为提供正确答案而获得积分:)

标签： javascript dom

【解决方案1】：

“你的代码是正确的”

【讨论】：

【解决方案2】：

旧帖子，但这里有一个快速功能：

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

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

【讨论】：

【解决方案3】：

尝试使用：

如果（aElements[i] === 发件人）

而不是

if (aElements[i] == sender)

【讨论】：

【解决方案4】：

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

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

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

或

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

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

【讨论】：

我很确定，因为在我的“真实”示例中，<a> 元素的背景在循环中发生了变化。这证明该函数确实被执行了。（BWT，我正在使用 Chrome。我不知道这是否重要...）

【解决方案5】：

jquery 可以帮助使用prevAll()

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

【讨论】：