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

previousSiblingnullに達するまで、 sを1でカウントnodeTypeします（要素ノードのみをカウントします。テキストノードとコメントノードは無視したいと思います）。

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