如何使用jQuery从动态生成的每行中随机选择一个列？

没问题，我来帮你搞定这个需求！先补全你未完成的棋盘初始化代码，再一步步实现随机选列的逻辑。

第一步：补全棋盘初始化代码 #

先把你没写完的boardSetUp函数补全，确保行和列能正确渲染到页面：

$(document).ready(function(){ 
    var canva = $("#board"); 
    var rows = 7; 
    var cols = 10; 

    function boardSetUp(){ 
        // 先清空容器，避免重复生成内容
        canva.empty();
        for(var i = 0; i < rows; i++){ 
            var row = "<div class='row'>"; 
            for(var j = 0; j < cols; j++){ 
                var col = "<li class='col'></li>"; 
                row += col; 
            } 
            // 闭合行标签并添加到容器中
            row += "</div>";
            canva.append(row);
        }
    }

    // 初始化棋盘
    boardSetUp();
});

第二步：实现每行随机选列的核心逻辑 #

接下来写一个函数，遍历每一行，在每行的列中随机挑选一个，还可以给选中的列加个标记方便识别：

function selectRandomColPerRow() {
    // 先移除之前选中的标记，避免重复高亮
    $(".col.selected").removeClass("selected");

    // 遍历每一行
    $(".row").each(function() {
        // 获取当前行下的所有列元素
        var colsInRow = $(this).find(".col");
        // 计算当前行的列总数
        var colsCount = colsInRow.length;
        // 生成0到colsCount-1之间的合法随机索引
        var randomIndex = Math.floor(Math.random() * colsCount);
        // 根据随机索引选中对应列，添加高亮类
        colsInRow.eq(randomIndex).addClass("selected");
    });
}

// 调用函数，执行第一次随机选择
selectRandomColPerRow();

关键逻辑说明 #

• $(".row").each()：逐个遍历页面上的所有行，保证只在当前行范围内选列
• $(this).find(".col")：锁定当前行下的列元素，不会跨行选择
• Math.floor(Math.random() * colsCount)：Math.random()生成0-1的随机数，乘以列数后用Math.floor()取整，得到合法的数组索引（0到列数-1）
• colsInRow.eq(randomIndex)：通过索引定位到目标列，添加selected类做可视化标记

可选：添加样式让选中效果更直观 #

你可以加一段CSS，让选中的列高亮显示：

.col {
    display: inline-block;
    width: 30px;
    height: 30px;
    border: 1px solid #ccc;
    margin: 2px;
}

.col.selected {
    background-color: #4CAF50;
}

把这些代码整合后，就能实现从每行随机选一列的功能了。你还可以把selectRandomColPerRow绑定到按钮点击事件上，每次点击都能重新随机选择。

内容的提问来源于stack exchange，提问作者Princewill moto Fabi