如何将含get().reverse()的jQuery代码转换为原生JavaScript？

先拆解下你原来那段jQuery的逻辑：

• $(".card")：抓取所有带.card类的元素，返回jQuery集合
• .get()：把jQuery集合转成原生DOM元素的数组
• .reverse()：把数组倒序排列，让原来最后一个元素排在最前面
• 遍历反转后的元素，从1开始给每个元素添加zIndex+数字的类

换成原生JS可以这么写：

// 1. 获取所有.card元素，转成数组并反转
const cards = Array.from(document.querySelectorAll('.card')).reverse();
// 2. 遍历反转后的数组，给每个元素添加目标类
cards.forEach((card, index) => {
  // 索引从0开始，所以序号是index+1
  card.classList.add(`zIndex${index + 1}`);
});

逐行对应原逻辑： #

• Array.from(document.querySelectorAll('.card')) 对应 $(".card").get()：把选择器返回的NodeList转成原生数组
• .reverse() 和原代码里的.reverse()功能完全一致
• forEach 替代jQuery的.each()，利用第二个参数index直接生成序号，不需要额外声明count变量

执行后，页面中的.card元素会变成你需要的效果：

<div class="card zIndex3"></div>
<div class="card zIndex2"></div>
<div class="card zIndex1"></div>

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