如何统计指定元素前class为apple的元素出现次数（不使用jQuery）

当然可以用纯原生JavaScript实现，下面提供两种实用方法：

方法一：向前遍历兄弟元素计数 #

先获取目标元素，再逐个向前查找兄弟元素，统计其中class为apple的元素数量：

// 获取id为MyElement的目标元素
const targetElement = document.getElementById('MyElement');
let count = 0;
let current = targetElement.previousElementSibling;

// 循环遍历所有前置兄弟元素
while (current) {
  if (current.classList.contains('apple')) {
    count++;
  }
  current = current.previousElementSibling;
}

// count就是目标元素前的apple元素数量
console.log(count);
// 后续可通过document.getElementsByClassName('apple')[count]访问目标元素

方法二：利用元素集合的索引直接获取 #

document.getElementsByClassName()返回的HTMLCollection是按文档顺序排列的，目标元素在这个集合中的索引，恰好就是它前面同class元素的数量，直接遍历集合找到索引即可：

const appleElements = document.getElementsByClassName('apple');
const targetElement = document.getElementById('MyElement');
let targetIndex = -1;

// 遍历集合匹配目标元素
for (let i = 0; i < appleElements.length; i++) {
  if (appleElements[i] === targetElement) {
    targetIndex = i;
    break;
  }
}

// targetIndex即为目标元素前的apple元素数量
console.log(targetIndex);
// 直接用appleElements[targetIndex]就能访问目标元素，无需额外计数

第二种方法更高效直接，既得到了计数，又能直接通过索引操作目标元素，适合你的需求。

内容的提问来源于stack exchange，提问作者Jaxon