js实现 jquery index
使用原生JavaScript实现jQuery的index()功能
jQuery的index()方法用于获取当前元素在其同级元素中的位置。以下是用原生JavaScript实现类似功能的方法：
方法一：使用Array.prototype.indexOf
function getIndex(element) {
if (!element || !element.parentNode) return -1;
return Array.from(element.parentNode.children).indexOf(element);
}方法二：使用previousElementSibling遍历
function getIndex(element) {
let index = 0;
let prev = element.previousElementSibling;
while (prev) {
index++;
prev = prev.previousElementSibling;
}
return index;
}方法三：带选择器过滤的实现
function getIndex(element, selector) {
const siblings = selector
? Array.from(element.parentNode.querySelectorAll(selector))
: Array.from(element.parentNode.children);
return siblings.indexOf(element);
}使用示例
<ul>
<li>Item 1</li>
<li class="active">Item 2</li>
<li>Item 3</li>
</ul>
<script>
const activeItem = document.querySelector('.active');
console.log(getIndex(activeItem)); // 输出: 1
console.log(getIndex(activeItem, 'li')); // 输出: 1
</script>性能考虑
- 方法一适合现代浏览器，利用了原生数组方法
- 方法二在大型DOM结构中可能更高效，因为它不需要创建数组
- 方法三提供了类似jQuery的带选择器过滤功能
注意事项
- 这些实现返回的索引都是从0开始的
- 如果元素不存在于父节点中，将返回-1
- 与jQuery不同，这些实现不会自动处理文本节点和注释节点
