javascript - jqueryまたはvanilla jsを使用してli内の要素の位置を見つける方法

Question

次の HTML コードがあるとします。

クラス フォーカスが適用されている LI の LI 要素内の位置を見つける必要があります。

この例では、結果は 2 になります (インデックスが 0 の場合)。それを行う方法はありますか？

<ul class="mylist">
    <li>Milk</li>
    <li>Tea</li>
    <li class="focus">Coffee</li>
</ul>

Answer 1

純粋な JavaScript の場合:

var index = 0;
var lis = document.getElementsByTagName('li');
for (var len = lis.length; index < len; ++index) {
    if (lis[index].className.match(/\bfocus\b/)) {
        break;
    }
}

(フィドル)

Answer 2

あなたの質問に対する回答はすでに受け入れられていますが、私は s の簡単なindex()方法をまとめたいと思いましたHTMLElement:

HTMLElement.prototype.index = function () {
    var self = this,
        parent = self.parentNode,
        i = 0;
    while (self.previousElementSibling){
        i++;
        self = self.previousElementSibling
    }
    return this === parent.children[i] ? i : -1;
}

var focus = document.querySelector('li.focus'),
    i = focus.index();
console.log(i); // 2

JS フィドルのデモ。

参考文献:

• Element.previousElementSibling
• document.querySelector().

Answer 3

使用する.index()

var index = $('.focus').index();

デモ

特定のリスト

$('.mylist .focus').index()

デモ