JavaScript的DOM：寻找元素指数集装箱(JavaScript DOM: Find Elem

我需要找到元素的容器内的对象引用的索引。 奇怪的是，我无法找到一个简单的方法。 没有jQuery，请 - 只是DOM。

UL
 LI
 LI
 LI - my index is 2
 LI

是的，我可以通过所有节点分配ID给每个元素循环相匹配的ID，但它似乎是一个不好解决。 是不是有什么更好？

所以，说我有一个对象参照第三LI如在上面的例子。 我怎么知道它是指数2？

谢谢。

Answer 1:

你可以做的使用Array.prototype.indexOf 。 为此，我们需要有点“投”的HTMLNodeCollection成为一个真正的Array 。 例如：

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]; console.log( nodes.indexOf( liRef ) ); 

 <ul id="list"> <li>foo</li> <li class="match">bar</li> <li>baz</li> </ul> 

Answer 2:

2017年更新

下面原来答案假设OP要包括非空文本节点和其它节点类型和元素。 它似乎并不清楚，我从现在的问题，这是否是一个有效的假设。

假设，而不是你只想元素索引， previousElementSibling现在是很好的支持（这是不是在2012年的情况），是显而易见的选择了。 以下（这是相同的这里一些其他的答案）将在一切除IE <= 8主要工作。

function getElementIndex(node) {
    var index = 0;
    while ( (node = node.previousElementSibling) ) {
        index++;
    }
    return index;
}

原来的答案

只要使用previousSibling ，直到你打null 。 我假设你要忽略白色空间仅文本节点; 如果你想过滤的其他节点，然后相应地调整。

function getNodeIndex(node) {
    var index = 0;
    while ( (node = node.previousSibling) ) {
        if (node.nodeType != 3 || !/^\s*$/.test(node.data)) {
            index++;
        }
    }
    return index;
}

Answer 3:

这里是我该怎么办（2018版）：

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

Tadaaaam。 而且，如果有的话你要考虑原始文本节点过多，你可以这样做，而不是：

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

我上铺的孩子到一个数组，因为他们的HTMLCollection（因此他们不工作的indexOf）。

要小心，你正在使用巴贝尔或浏览器覆盖面够你需要实现（约蔓延运营商基本上是幕后的Array.from思考）的东西。

Answer 4:

Array.prototype.indexOf.call(this.parentElement.children, this);

或者使用let的语句。

Answer 5:

对于刚刚元素这可以用来找到一个元素的索引当中它的兄弟元素：

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

需要注意的是previousElementSibling未在IE <9支撑。

Answer 6:

你可以用它来寻找一个元素的索引：

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

的jsfiddle

Answer 7:

从的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>

Answer 8:

现代天然的方法可以利用“Array.from（）” - 例如：`

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

 <ul> <li>zero <li>one <li id='get-this-index'>two <li>three </ul> <h2></h2> 

`

Answer 9:

如果你想写这个紧凑所有你需要的是：

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

我们只是通过在父节点的元素循环，当我们发现你的元素停止。

你也可以很容易做到：

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

如果这就是你想通过看。

Answer 10:

你可以通过遍历<li>在S <ul>和停止，当你找到合适的人。

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

}

演示

Answer 11:

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

HTML

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

JavaScript 执行的onload /就绪或UL之后被渲染

var list = document.getElementById("foo"),
    items = list.getElementsByTagName("li");

list.onclick = function(e) {
    var evt = e || window.event,
    src = evt.target || evt.srcElement;
    var myIndex = findIndex(src);
    alert(myIndex);
};

function findIndex( elem ) {
    var i, len = items.length;
    for(i=0; i<len; i++) {
        if (items[i]===elem) {
            return i;
        }
    }
    return -1;
}

运行示例

的jsfiddle

Answer 12:

只要传递对象引用下面的函数，你会得到索引

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

文章来源: JavaScript DOM: Find Element Index In Container