JavaScript DOM:在容器中查找元素索引
我需要通过对象引用在其容器内找到元素的索引。奇怪的是,我找不到一个简单的方法。请不要使用jQuery-只使用DOMJavaScript DOM:在容器中查找元素索引,javascript,html,dom,parent-child,Javascript,Html,Dom,Parent Child,我需要通过对象引用在其容器内找到元素的索引。奇怪的是,我找不到一个简单的方法。请不要使用jQuery-只使用DOM UL LI LI LI - my index is 2 LI 是的,我可以为每个元素分配ID,并通过所有节点循环以匹配ID,但这似乎是一个糟糕的解决方案。难道没有更好的吗 假设我有一个对第三个LI的对象引用,如上面的例子所示。我怎么知道它是索引2 谢谢。您可以使用它来查找元素的索引: Array.prototype.indexOf.call(yourUl,yourLi)
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);