jQuery迭代每次取两个元素实现一行两个动物、奇数个单独一行

你原有代码存在几个逻辑缺陷：

• 遍历每个动物时都执行了addAnimalsMen，而非攒够2个动物再调用，会出现重复渲染、变量未定义的问题
• 没有兼容动物总数为奇数的场景，最后1个动物无法被正常渲染
• firstAnimal、secondAnimal的变量作用域设置不合理，多次循环会出现变量覆盖、未定义报错

1. 重写fillResults函数 #

改用步长为2的for循环实现，每次直接取当前和下一个动物对象，逻辑更清晰可控：

function fillResults(response, gender) {
    $("#records_animals_man").empty();
    var animals = response;
    // 增加非空判断避免报错
    if(gender == 'M' && animals?.length > 0){
        // 每次步进2，一次取1-2个动物
        for(let i = 0; i < animals.length; i += 2) {
            const firstAnimal = animals[i];
            const secondAnimal = animals[i+1]; // 总数为奇数时最后一次取值为undefined
            addAnimalsMen(firstAnimal, secondAnimal);
        }
    }
}

2. 调整addAnimalsMen兼容单动物场景 #

判断第二个动物是否存在，不存在就不渲染，避免调用prepareAnimalToShow时报错：

function addAnimalsMen(firstAnimal, secondAnimal) {
    let html = '<div class="rounded bg-light shadow-sm my-5 p-3 text-center">' +
            '<div class="form-row text-center">' +
                '<div class="col-md-2"></div>' +
                prepareAnimalToShow(firstAnimal);
    // 仅第二个动物存在时才渲染
    if(secondAnimal) {
        html += prepareAnimalToShow(secondAnimal);
    }
    html += '</div></div>';
    $('#records_animals_man').append(html);
}

如果希望最后一行单个动物居中显示，可以调整单动物渲染逻辑，给单个动物加左侧偏移：

// addAnimalsMen里修改渲染逻辑即可
if(secondAnimal) {
    html += prepareAnimalToShow(firstAnimal) + prepareAnimalToShow(secondAnimal);
} else {
    // 加空列偏移，让单个动物居中
    html += '<div class="col-md-2"></div>' + prepareAnimalToShow(firstAnimal);
}

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