javascript - 查找孩子的序列号

Question

假设我有一个给定的 html 代码：

<ul class="fmenu123">
    <li>city</li>
    <li>service</li>
    <li>hour</li>
</ul>

在 jquery 函数children和选择器中有nth-child。但是我怎么能找到这个ul元素的“鼠标悬停”子元素的序列号 - 即数字n使得第 n 个子ul元素正是这个选定的元素？在jquery中找到这个最简单的方法是什么？提前致谢。

Answer 1

。指数（）

$(".fmenu123 li").on("mouseover", function() {
    var index = $(this).index() + 1;
    console.log("hovered element: " + index);
});

小提琴

Answer 2

用 1计数previousSiblings nodeType（仅计算元素节点：我假设您想忽略文本和注释节点），直到您点击 null。

function getElementIndex(node) {
    var index = 0;
    while ( (node = node.previousSibling) ) {
        if (node.nodeType == 1) {
            index++;
        }
    }
    return index;
}

例子：

$('li').on('mouseover', function() {
    var index = getElementIndex(this);
});

Answer 3

您可以使用该.index()功能，如下所示：

$('li').on('mouseover', function() {
    var n = $(this).index() + 1; // :nth-child() is 1-indexed, .index() is 0-indexed
    // do some stuff with n
});