如何在jQuery的.each循环中分组控制元素属性？

其实你完全可以在jQuery的.each()循环里实现这种分组控制！因为.each()本身就会给回调函数传递两个参数：当前元素的索引（从0开始）和当前元素本身，利用这个索引就能轻松区分不同区间的元素，根本不需要额外的内置函数~

场景1：固定每组数量（比如每10个一组） #

如果你的需求是每10个元素为一组，统一赋予特定值，那可以通过Math.floor(index / 每组数量)来计算当前元素所属的分组编号，再根据编号做不同处理：

// 假设你的元素选择器是.target-elements
$('.target-elements').each(function(index, element) {
    // 计算当前元素属于第几组（每10个一组，编号从0开始）
    const groupId = Math.floor(index / 10);

    // 根据分组编号执行不同的绘制逻辑
    switch(groupId) {
        case 0:
            // 前10个元素（索引0-9）：赋予特定值
            drawToCanvas(element, { color: '#ff4444', size: 10 });
            break;
        case 1:
            // 接下来10个元素（索引10-19）：另一组值
            drawToCanvas(element, { color: '#44ff44', size: 12 });
            break;
        case 2:
            // 第三组10个元素（索引20-29）：再一组值
            drawToCanvas(element, { color: '#4444ff', size: 14 });
            break;
        default:
            // 剩下的所有元素：统一处理逻辑
            drawToCanvas(element, { color: '#999999', size: 8 });
            break;
    }
});

// 示例：绘制到canvas的函数（根据你的实际需求调整）
function drawToCanvas(el, params) {
    // 这里写你的canvas绘制逻辑，比如获取元素数据、使用params里的参数渲染
    const data = $(el).data('canvas-data');
    // 假设你已经有canvas上下文ctx
    ctx.fillStyle = params.color;
    ctx.fillRect(data.x, data.y, params.size, params.size);
}

场景2：自定义分组区间（比如前10、11-25、26-100） #

如果每组的元素数量不固定，直接通过索引的范围判断更直观：

$('.target-elements').each(function(index, element) {
    if (index < 10) {
        // 前10个元素（索引0-9）
        drawToCanvas(element, { color: '#ff4444', size: 10 });
    } else if (index < 25) {
        // 接下来15个元素（索引10-24）
        drawToCanvas(element, { color: '#44ff44', size: 12 });
    } else {
        // 剩下的元素（索引25-99）
        drawToCanvas(element, { color: '#4444ff', size: 14 });
    }
});

小提示 #

• 注意jQuery的.each()索引是从0开始的，所以前10个元素对应index < 10（覆盖0到9），别搞错范围哦。
• 如果分组规则比较复杂，可以把分组配置做成数组，比如const groupRanges = [10,25,100]，然后通过循环判断当前索引落在哪个区间，这样代码更易维护。

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