js实现 jquery index

实现 jQuery 的 index() 方法

jQuery 的 index() 方法用于获取当前元素在其同级元素中的位置索引。以下是纯 JavaScript 的实现方式：

方法一：使用 Array.prototype.indexOf

function index(element) {
  if (!element || !element.parentNode) return -1;
  return Array.from(element.parentNode.children).indexOf(element);
}

方法二：遍历同级元素

function index(element) {
  if (!element || !element.parentNode) return -1;
  let children = element.parentNode.children;
  for (let i = 0; i < children.length; i++) {
    if (children[i] === element) return i;
  }
  return -1;
}

方法三：扩展 Element 原型

Element.prototype.index = function() {
  if (!this.parentNode) return -1;
  return Array.from(this.parentNode.children).indexOf(this);
};

使用示例

// 获取某个元素的索引
let element = document.querySelector('.target');
console.log(index(element)); // 使用方法一或二
console.log(element.index()); // 使用方法三

注意事项

1. 这些实现只考虑元素节点，忽略文本节点等其他节点类型，与 jQuery 的行为一致。
2. 如果元素没有父节点或不在 DOM 中，返回 -1。
3. 索引从 0 开始计数，与 jQuery 的 index() 方法行为相同。

这些方法可以替代 jQuery 的 index() 功能，适用于现代浏览器环境。