js实现 jquery index

使用原生JavaScript实现jQuery的index()功能

jQuery的index()方法用于获取当前元素在其同级元素中的位置。以下是用原生JavaScript实现类似功能的方法：

方法一：使用Array.prototype.indexOf

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

方法二：使用previousElementSibling遍历

function getIndex(element) {
  let index = 0;
  let prev = element.previousElementSibling;

  while (prev) {
    index++;
    prev = prev.previousElementSibling;
  }

  return index;
}

方法三：带选择器过滤的实现

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

  return siblings.indexOf(element);
}

使用示例

<ul>
  <li>Item 1</li>
  <li class="active">Item 2</li>
  <li>Item 3</li>
</ul>

<script>
  const activeItem = document.querySelector('.active');
  console.log(getIndex(activeItem)); // 输出: 1
  console.log(getIndex(activeItem, 'li')); // 输出: 1
</script>

性能考虑

• 方法一适合现代浏览器，利用了原生数组方法
• 方法二在大型DOM结构中可能更高效，因为它不需要创建数组
• 方法三提供了类似jQuery的带选择器过滤功能

注意事项

• 这些实现返回的索引都是从0开始的
• 如果元素不存在于父节点中，将返回-1
• 与jQuery不同，这些实现不会自动处理文本节点和注释节点