jquery-append-to-x-amount-of-boxs-based-on-percentage

by dekkard

HTML

<div id="the-grid">
  <ul class="align-table">
    <li class="t-align-row">
      <ul class="align-table">
        <li class="t-align">
          <div class="place"></div>
        </li>
        <li class="t-align">
          <div class="place"></div>
        </li>
        <li class="t-align">
          <div class="place"></div>
        </li>
        <li class="t-align">
          <div class="place"></div>
        </li>
        <li class="t-align">
          <div class="place"></div>
        </li>
        <li class="t-align">
          <div class="place"></div>
        </li>
        <li class="t-align">
          <div class="place"></div>
        </li>
        <li class="t-align">
          <div class="place"></div>
        </li>
        <li class="t-align">
          <div class="place"></div>
        </li>
        <li class="t-align">
          <div class="place"></div>
        </li>
        <li class="t-align">
          <div class="place"></div>
        </li>
        <li class="t-align">
          <div class="place"></div>
        </li>
        <li class="t-align">
          <div class="place"></div>
        </li>
        <li class="t-align">
          <div class="place"></div>
        </li>
      </ul>
    </li>
    <li class="t-align-row">
      <ul class="align-table">
        <li class="t-align">
          <div class="place"></div>
        </li>
        <li class="t-align">
          <div class="place"></div>
        </li>
        <li class="t-align">
          <div class="place"></div>
        </li>
        <li class="t-align">
          <div class="place"></div>
        </li>
        <li class="t-align">
          <div class="place"></div>
        </li>
        <li class="t-align">
          <div class="place"></div>
        </li>
        <li class="t-align">
          <div class="place"></div>
        </li>
        <li class="t-align">
          <div class="place"></div>
        </li>
        <li class="t-align">
          <div class="place"></div>
     ...

JavaScript

// fill each div for easy distinguishing
$("#the-grid div").each(function(i, el){
    $(this).html( i );
});

// ------ START --------

    var PERCENT = 25;
    
    
    var getRandomSelection = function(el, count) {
        return ( $(el).get().sort(function(){ 
                    return Math.round(Math.random())-0.5
                }).slice(0, count) );
    }
    
    var $divs = $("#the-grid div");
    var toAppendCount = $divs.length / 100 * PERCENT;
    
    var randomElements = getRandomSelection($divs, toAppendCount);
    $.each(randomElements, function(){
        $(this).append("WHAT!");
    });