如何用JavaScript/jQuery每两个元素为一组进行目标定位

嘿，这个需求其实很好实现，我给你两种简洁的JavaScript方案，不管是处理<li>还是表格的<tr>都适用：

方法一：用带步长的for循环 #

这种方式直观易懂，直接以2为步长遍历元素，每次处理一组两个元素：

// 获取所有目标元素，这里以li为例，换成tr就是处理表格行
const elements = document.querySelectorAll('li');

for (let i = 0; i < elements.length; i += 2) {
    // 计算当前组的类名，比如class1、class2...
    const groupClass = `class${Math.floor(i / 2) + 1}`;
    // 给当前元素加类
    elements[i].classList.add(groupClass);
    // 如果存在下一个元素，也添加同一个类（处理元素数量为奇数的情况）
    if (elements[i + 1]) {
        elements[i + 1].classList.add(groupClass);
    }
}

方法二：用forEach结合索引判断 #

这种写法更简洁，利用元素的索引来计算所属组，自动处理所有情况：

const elements = document.querySelectorAll('li');

elements.forEach((el, index) => {
    // 索引除以2取整，加1得到组号
    const groupNum = Math.floor(index / 2) + 1;
    el.classList.add(`class${groupNum}`);
});

两种方法的核心思路都是通过索引计算元素所属的组，你可以根据自己的代码风格选择。如果是处理表格，只需要把选择器从'li'改成'tr'就可以啦。

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