js实现jqueryindex
使用纯 JavaScript 实现 jQuery 的 index() 方法
jQuery 的 index() 方法用于获取当前元素在其兄弟元素中的位置索引。以下是用纯 JavaScript 实现的几种方法：
方法一：使用 Element.children 和 Array.prototype.indexOf
function index(element) {
if (!element.parentNode) return -1;
return Array.prototype.indexOf.call(element.parentNode.children, element);
}方法二：使用 previousElementSibling 遍历
function index(element) {
let i = 0;
while ((element = element.previousElementSibling) !== null) {
i++;
}
return i;
}方法三：使用 parentElement 和 childNodes 遍历
function index(element) {
const children = element.parentElement.children;
for (let i = 0; i < children.length; i++) {
if (children[i] === element) return i;
}
return -1;
}注意事项
- 这些方法返回的索引是从 0 开始的，与 jQuery 的
index()方法行为一致。 - 如果元素没有父节点，或者不在 DOM 树中，这些方法会返回 -1。
- 方法一利用了
Array.prototype.indexOf，在性能上通常是最优的。
使用示例
const element = document.querySelector('.target');
console.log(index(element)); // 输出元素在其兄弟元素中的位置索引这些实现可以替代 jQuery 的 index() 方法，适用于现代浏览器环境。
