grid 布局生成奇偶行选择器

grid布局生成奇偶行选择器

// 生成奇数行和偶数行的选择器
function generateSelectors(colNum) {
    let evenSelectors = []; // 偶数行的选择器
    let oddSelectors = [];  // 奇数行的选择器

    // 生成偶数行的选择器
    for (let k = 1; k <= colNum; k++) {
        evenSelectors.push(`div:nth-child(${2 * colNum}n + ${k + colNum})`);
    }

    // 生成奇数行的选择器
    for (let k = 1; k <= colNum; k++) {
        oddSelectors.push(`div:nth-child(${2 * colNum}n + ${k})`);
    }

    // 将选择器拼接成字符串
    const evenSelectorString = evenSelectors.join(',');
    const oddSelectorString = oddSelectors.join(',');

    return {
        even: evenSelectorString,
        odd: oddSelectorString
    };
}

// 调用示例
const colNum = 3; // 列数
const selectors = generateSelectors(colNum);
console.log("/* 偶数行的选择器 */");
console.log(selectors.even);
console.log("/* 奇数行的选择器 */");
console.log(selectors.odd);
image.png

留下你的脚步
推荐阅读