J'ai créé dynamiquement des lignes et des colonnes avec jQuery. Quelqu'un peut-il m'aider à sélectionner une colonne au hasard dans chaque ligne? Jusqu'à présent, voici à quoi ressemble mon code;

$(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();
})
1
Princewill moto Fabi 11 avril 2018 à 23:35

3 réponses

Meilleure réponse

Vous pouvez utiliser une combinaison de Math.floor () et Math.random () pour obtenir un entier compris entre 1 et le nombre de colonnes (x) par ligne.

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

J'ai simplifié votre exemple donné et ajouté une fonction pour sélectionner une colonne aléatoire par ligne. Pour cet exemple, j'ajoute dynamiquement une classe pour chaque colonne sélectionnée.

$(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>
0
wayneOS 11 avril 2018 à 21:14

Vous pouvez utiliser foreach et random, essayez :

    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++;
    });
0
Nourein 11 avril 2018 à 20:55

Je vois que vous demandez une colonne aléatoire pour chaque ligne, mais si vous souhaitez simplement une position aléatoire sur le plateau de jeu, vous pouvez faire quelque chose comme ceci:

$(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;
    }
})
0
Dan Raps 11 avril 2018 à 20:51