JavaScript DOM:在容器中查找元素索引
JavaScript DOM: Find Element Index In Container
>我需要通过对象引用在其容器内找到元素的索引。奇怪的是,我找不到一个简单的方法。请不要使用jQuery - 只有DOM。
UL
LI
LI
LI - my index is 2
LI
是的,我可以为每个元素分配 ID 并遍历所有节点以匹配 ID,但这似乎是一个糟糕的解决方案。难道没有更好的东西吗?
因此,假设我有一个对第三个 LI 的对象引用,如上例所示。我怎么知道它是索引 2?
谢谢。
您可以使用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>
这是我的做法(2018 版?
const index = [...el.parentElement.children].indexOf(el);
塔达阿姆。而且,如果您也想考虑原始文本节点,您可以改为这样做:
const index = [...el.parentElement.childNodes].indexOf(el);
我将子项分散到一个数组中,因为它们是 HTMLCollection(因此它们不适用于 indexOf(。
请注意,您使用的是 Babel 或浏览器覆盖范围足以满足您的需求(考虑传播运算符,它基本上是一个幕后的 Array(。
> 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;
}
Array.prototype.indexOf.call(this.parentElement.children, this);
或者使用let
语句。
您可以使用它来查找元素的索引:
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]));
}
吉斯菲德尔
对于仅元素,这可用于在其同级元素中查找元素的索引:
function getElIndex(el) {
for (var i = 0; el = el.previousElementSibling; i++);
return i;
}
请注意,IE<9 不支持previousElementSibling
。
现代本机方法可以使用"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>
const nodes = Array.prototype.slice.call( el.parentNode.childNodes );
const index = nodes.indexOf(el);
console.log('index = ', index);
从 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>
如果你想紧凑地编写这个,你所需要的只是:
var i = 0;
for (;yourElement.parentNode[i]!==yourElement;i++){}
indexOfYourElement = i;
我们只是循环浏览父节点中的元素,当我们找到您的元素时停止。
您还可以轻松执行以下操作:
for (;yourElement.parentNode.getElementsByTagName("li")[i]!==yourElement;i++){}
如果这就是你想看的全部内容。
您可以遍历<ul>
中的<li>
,并在找到合适的时停止。
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;
}
}
}
演示
另一个仅使用基本循环和索引检查的示例
.HTML
<ul id="foo">
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
JavaScript在加载/就绪或 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;
}
运行示例
js小提琴
只需将对象引用传递给以下函数,您将获得索引
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);
}
}
}
}
}
- 查找元素高度,包括边距
- 在AngularJs中查找元素并更改其内容
- JavaScript-如何按类查找元素并删除此类
- 使用javascript查找元素位置的最快方法
- iframe中的jQuery查找元素不起作用
- 查找元素的目标
- 通过id查找元素并附加链接
- 无法查找元素'手动加载CSS文件时的CSS属性
- 如何使用PHP在HTML中查找元素
- 按 ID 包含子字符串的类查找元素并更改样式
- 按类查找元素
- 如何在不使用 ID 的情况下查找元素
- JavaScript-在数组中查找元素,并从用户提示中处理null
- JavaScript DOM:在容器中查找元素索引
- CasperJS可以't使用CSS选择器或xPath查找元素
- jQuery查找元素,然后组成逗号分隔的列表
- 在 CasperJS 中使用 __utils__.getElementsByXPath 查找元素
- 如何使用tabindex-Javascript而不是jquery来查找元素
- 使用 shift 在具有字符串/数组的文档中查找元素
- 如何在另一个页面中查找元素,并从当前页面上的元素中输入值