Question

我用jQuery动态创建了行和列。谁能帮助我如何从每一行中选择一个随机列？到目前为止，这是我的代码的样子;

$(document).ready(function(){
     var canva = $("#board");
     var gameHolder = "<div class='gHolder'>";

     var rows = 7;
     var cols = 10;

        function boardSetUp(){
                     for(var i = 0; i < rows; i++){

                        var row = "<div class='row'>";

                        for(var j = 0; j < cols; j++){
                            var col = "<li class='col'>";
                            col += "</li>";
                            row += col;
                        }

                        row += "</div>";

                        gameHolder += row;
                     }

                     gameHolder += "</div>";

                     canva.html(gameHolder);
            }
        boardSetUp();
})

Answer 1

您可以使用foreach和random，尝试：

    var j = 0;
    $("row").each(function(){
        random_col = Math.floor(Math.random() * 10);
        var i = 0;
        $("li").each(function(){
            if(random_col == i)
             /* $(this) =  your random col */
                alert("the random col is a number "+i+" for col number "+j);
          i++;
        });
        j++;
    });

Answer 2

我看到你要求每一行都有一个随机列，但是如果你想在游戏板上只是一个随机位置，你可以这样做：

$(document).ready(function(){
 var canva = $("#board");
 var gameHolder = "<div class='gHolder'>";

 var rows = 7;
 var cols = 10;

    function boardSetUp(){
                 for(var i = 0; i < rows; i++){

                    var row = "<div class='row'>";

                    for(var j = 0; j < cols; j++){
                        var col = "<li class='col' id='" + i + "-" + j + "'>";
                        col += "</li>";
                        row += col;
                    }

                    row += "</div>";

                    gameHolder += row;
                 }

                 gameHolder += "</div>";

                 canva.html(gameHolder);
        }
    boardSetUp();
    function selectRandomLocation(){
        var pos = $('#' + Math.floor(Math.random() * rows) + '-' + Math.floor(Math.random() * cols));
        return pos;
    }
})

Answer 3

您可以使用Math.floor()和Math.random()的组合来获得1到每行的列数（x）之间的整数。

Math.floor (Math.random () * x) + 1

我简化了您的给定示例并添加了一个功能，以便每行选择一个随机列。对于此示例，我为每个选定的列动态添加一个类。

$(document).ready (function () {
  var rows        = 7;
  var cols        = 10;
  var gameHolder  = '';

  for (var i = 0; i < rows; i++) {
    gameHolder += '<div class="row">';

    for(var j = 0; j < cols; j++)
       gameHolder += '<div class="col"></div>';

    gameHolder += '</div>';
  }

  $("#board").html(gameHolder);
})

function select_cols () {
  var canvas = $("#board");
  
  //reset all columns
  $('.col').removeClass ('selected');
  
  //loop through every row
  canvas.find ('.row').each (function (i) {
     //count columns and select random one
     var count    = $(this).find ('.col').size (); // $(this) is the current row
     var selected = Math.floor (Math.random () * count) + 1;
     
     //get your selected column-element
     var column = $(this).find ('.col:nth-child(' + selected + ')') // :nth-child(x) is a css-selector
     
     //do something with it. for example add a class
     column.addClass ('selected');
  });
}

#board {
  border: 1px solid #999;
}

.row {
  display: flex;
}

.col {
  flex-grow: 1;
  height: 10px;
  border: 1px solid #999;
}

.selected {
 background-color: #958;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="board"></div>
<br>
<button onclick="select_cols ();">select random columns</button>

如何使用jQuery从每行中随机选择一列？

3 个答案: