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 的版本健壮，需根据实际需求调整边界条件处理。