JavaScript DOM:在容器中查找元素索引

我需要通过对象引用在其容器内找到元素的索引。奇怪的是，我找不到一个简单的方法。请不要使用jQuery-只使用DOM

UL
 LI
 LI
 LI - my index is 2
 LI

是的，我可以为每个元素分配ID，并通过所有节点循环以匹配ID，但这似乎是一个糟糕的解决方案。难道没有更好的吗

假设我有一个对第三个LI的对象引用，如上面的例子所示。我怎么知道它是索引2

---

谢谢。

您可以使用它来查找元素的索引：

Array.prototype.indexOf.call（yourUl，yourLi）

例如，此示例记录所有索引：

var lis = yourList.getElementsByTagName('li');
for(var i = 0; i < lis.length; i++) {
    console.log(Array.prototype.indexOf.call(lis, lis[i]));
}​

var lis=yourList.getElementsByTagName（'li'）；
对于（变量i=0；i

---

您可以使用

Array.prototype.indexOf

。为此，我们需要在某种程度上将

HTMLNodeCollection

转换为真正的

数组。例如：

var nodes = Array.prototype.slice.call( document.getElementById('list').children );

然后我们可以打电话：

nodes.indexOf( liNodeReference );

例如：


var nodes=Array.prototype.slice.call（document.getElementById（'list'）.children），
liRef=document.getElementsByClassName（'match'）[0]；
log（nodes.indexOf（liRef））

福
bar
baz
您可以在
中的
中进行迭代，找到正确的代码后停止

function getIndex(li) {
    var lis = li.parentNode.getElementsByTagName('li');
    for (var i = 0, len = lis.length; i < len; i++) {
        if (li === lis[i]) {
            return i;
        }
    }

}

函数getIndex（li）{
var lis=li.parentNode.getElementsByTagName（'li'）；
对于（变量i=0，len=lis.length；i

仅使用基本循环和索引检查的另一个示例

HTML

<ul id="foo">
    <li>0</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>


0
一,
二,
三,
四,


JavaScript在加载/准备就绪时或呈现ul后运行

var list=document.getElementById（“foo”），
items=list.getElementsByTagName（“li”）；
list.onclick=函数（e）{
var evt=e | | window.event，
src=evt.target | | evt.src元素；
var myIndex=findIndex（src）；
警报（myIndex）；
};
函数findIndex（elem）{
变量i，len=项目长度；
对于（i=0；i只需将对象引用传递给以下函数，您将获得索引

function thisindex(elm) 
{ 
    var the_li = elm; 
    var the_ul = elm.parentNode; 
    var li_list = the_ul.childNodes; 

    var count = 0; // Tracks the index of LI nodes

    // Step through all the child nodes of the UL
    for( var i = 0; i < li_list.length; i++ )
    {
        var node = li_list.item(i);
        if( node )
        {
        // Check to see if the node is a LI
            if( node.nodeName == "LI" )
            {
            // Increment the count of LI nodes
                count++;
            // Check to see if this node is the one passed in
                if( the_li == node )
                {
                    // If so, alert the current count
                    alert(count-1);
                }
            }
        }
    }
}

函数thisindex（elm）
{ 
var the_li=榆树；
var_ul=elm.parentNode；
var li_list=子节点；
var count=0；//跟踪LI节点的索引
//单步执行UL的所有子节点
对于（变量i=0；i
2017年更新

下面的原始答案假设OP想要包括非空文本节点和其他节点类型以及元素。现在我不清楚这是否是一个有效的假设

假设您只需要元素索引，
previousElementSibling
现在得到了很好的支持（2012年不是这种情况），现在是显而易见的选择将适用于除IE之外的所有主要元素。这可用于在其兄弟元素中查找元素的索引：

function getElIndex(el) {
    for (var i = 0; el = el.previousElementSibling; i++);
    return i;
}

请注意，IE中不支持
previousElementSibling
（从HTMLCollection生成数组的示例）

<ul id="myList">
    <li>0</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

<script>
var tagList = [];

var ulList = document.getElementById("myList");

var tags   = ulList.getElementsByTagName("li");

//Dump elements into Array
while( tagList.length != tags.length){
    tagList.push(tags[tagList.length])
};

tagList.forEach(function(item){
        item.addEventListener("click", function (event){ 
            console.log(tagList.indexOf( event.target || event.srcElement));
        });
}); 
</script>


0
一,
二,
三,
四,

var标记列表=[]；
var ulList=document.getElementById（“myList”）；
var tags=ulList.getElementsByTagName（“li”）；
//将元素转储到数组中
while（tagList.length！=tags.length）{
tagList.push（标记[tagList.length]）
};
tagList.forEach（功能（项）{
item.addEventListener（“单击”，函数（事件）{
log（tagList.indexOf（event.target | | event.src元素））；
});
}); 

或者使用
let
语句。
如果你想简洁地写这篇文章，你只需要：

var i = 0;
for (;yourElement.parentNode[i]!==yourElement;i++){}
indexOfYourElement = i;

我们只需在父节点中的元素之间循环，在找到您的元素时停止。

您也可以轻松地执行以下操作：

for (;yourElement.parentNode.getElementsByTagName("li")[i]!==yourElement;i++){}

如果您只想查看这些内容。
现代本机方法可以使用“Array.from（）”—例如：`


const el=document.getElementById（'get-this-index'））
const index=Array.from（document.querySelectorAll（'li'））.indexOf（el）
document.querySelector（'h2'）.textContent=`index=${index}`

零
一个
2
三

以下是我的做法（2018版？：

const index = [...el.parentElement.children].indexOf(el);

 Tadaaaam。如果你还想考虑原始文本节点，你可以这样做：
const index = [...el.parentElement.childNodes].indexOf(el);

我将子元素分散到一个数组中，因为它们是HTMLCollection（因此它们不使用indexOf）

请注意，您使用的是Babel，或者浏览器覆盖率足以满足您需要实现的功能（请考虑spread操作符，它基本上是一个数组。从幕后开始）.
我误解了这个问题。已编辑！更好，因为它将排除文本节点，并将返回您期望的元素的索引。您需要如何获取索引？悬停..等等？为什么不在li引用上执行以前的同级，直到达到null？如果将自定义属性添加到li元素。例如，
，
，您可以通过
var i = 0;
for (;yourElement.parentNode[i]!==yourElement;i++){}
indexOfYourElement = i;

for (;yourElement.parentNode.getElementsByTagName("li")[i]!==yourElement;i++){}

const index = [...el.parentElement.children].indexOf(el);

const index = [...el.parentElement.childNodes].indexOf(el);

    const nodes = Array.prototype.slice.call( el.parentNode.childNodes );
    const index = nodes.indexOf(el);
    console.log('index = ', index);