javascript - How to find the position for an element in a li with jquery or vanilla js

Question

Lets imagine I have the following HTML code.

I need to find the position within the LI elements for the LI which has the class focus applied.

In this example the result should be 2 (if at 0 index). Any idea how to do it?

<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()

演示

Answer 4

在 jQuery 中，您应该能够通过index. 使用类，当有多个类时，您可能会遇到问题。

我准备了一个Plunker，您可以在其中看到问题的解决方案。

Answer 5

扩展版本（jquery）将是

$(document).ready(function(){
 $('li').each(function(){
  var cls=$(this).attr('class');
  if(cls=='focus'){
   alert($(this).index());
  }
 });
});