Question

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

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

jquery函数children和选择器nth-child。但是，我怎样才能找到这个ul元素的序列号“mouseovered”子元素 - 即数字n，使得ul的第n个孩子正是这个被选中的元素？在jquery中找到这个最简单的方法是什么？提前谢谢。

Answer 1

.index()

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

fiddle

Answer 2

使用previousSibling计数nodeType 1（仅计算元素节点：我假设您要忽略文本和注释节点），直到您点击为止。

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
});

查找孩子的序列号

3 个答案: