js实现jqueryindex
实现 jQuery 的 index() 方法
在 jQuery 中，index() 方法用于获取当前元素在其兄弟元素中的位置索引。以下是使用原生 JavaScript 实现类似功能的几种方法。
使用 Element.parentElement 和 Element.children
通过获取父元素的所有子元素列表，遍历找到当前元素的索引：
function index(element) {
if (!element.parentElement) return -1;
const children = element.parentElement.children;
for (let i = 0; i < children.length; i++) {
if (children[i] === element) return i;
}
return -1;
}使用 Array.prototype.indexOf
将父元素的子元素集合转换为数组，直接使用 indexOf 方法查找：
function index(element) {
if (!element.parentElement) return -1;
return Array.from(element.parentElement.children).indexOf(element);
}支持选择器过滤
如果需要像 jQuery 那样支持传入选择器参数，可以扩展实现：
function index(element, selector) {
if (!element.parentElement) return -1;
const siblings = selector
? Array.from(element.parentElement.querySelectorAll(selector))
: Array.from(element.parentElement.children);
return siblings.indexOf(element);
}示例用法
const item = document.querySelector('.list-item');
console.log(index(item)); // 输出元素在父元素中的索引
console.log(index(item, '.active')); // 输出元素在符合.active选择器的兄弟元素中的索引注意事项
- 如果元素没有父元素（如
document或已分离的节点），返回-1。 - jQuery 的
index()在不传参数时返回在所有兄弟元素中的位置，传选择器时返回在匹配元素中的位置。 - 原生实现可能不如 jQuery 的版本健壮，需根据实际需求调整边界条件处理。
