js实现 jquery index

jQuery index() 方法在 JavaScript 中的实现

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

实现方法一：通过 siblings 和 indexOf

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

实现方法二：通过 previousSibling 计数

function index(element) {
  if (!element) return -1;
  let i = 0;
  while ((element = element.previousElementSibling)) {
    i++;
  }
  return i;
}

使用方法

const div = document.querySelector('.target');
console.log(index(div)); // 输出元素在同级中的索引

兼容 jQuery 的扩展实现

如果需要完全模拟 jQuery 的 index() 方法（支持选择器参数）：

function index(element, selector) {
  if (!element) return -1;

  const siblings = selector 
    ? Array.from(element.parentNode.querySelectorAll(selector))
    : Array.from(element.parentNode.children);

  return siblings.indexOf(element);
}

注意事项

• 原生 JavaScript 没有直接的 index() 方法，需要通过 DOM 操作实现
• 返回的索引是从 0 开始计数的
• 如果元素不存在于 DOM 中，会返回 -1
• 与 jQuery 版本不同，这些实现不会自动处理文本节点

这些实现提供了与 jQuery index() 方法相似的功能，可以根据具体需求选择使用。