0

So I have a grid that looks like below.

I also have a percentage box that can have from 0 - 100%.

What I want to do is on click append a div to one of the grid div's. Which is easy can do that simple's.

What I would really like it to do is on click append to x% of the div's

So I have 196 div's and the percent box says 25% when I click I want it to append to 49 of the div's randomly.

Like I said I am not looking for a code fix here really I am more looking to be pushed in the right direction or even a tutorial. As I have never tried this before and just being slapped with an answer is not going to help me out.

var sliders = $("#mixers .percent-mix");
var availableTotal = 100;

sliders.each(function() {
  var init_value = 100;

  $(this).siblings('.mix-value').text(init_value);

  $(this).empty().slider({
    value: init_value,
    min: 0,
    max: availableTotal,
    range: "max",
    step: 1,
    animate: 0,
    slide: function(event, ui) {
      debugger;
      // Update display to current value
      $(this).siblings('.mix-value').text(ui.value);

      // Get current total
      var total = 0;

      sliders.not(this).each(function() {
        total += $(this).slider("option", "value");
      });
      total += ui.value;
      var delta = availableTotal - total;

      // Update each slider
      sliders.not(this).each(function() {
        debugger;
        var t = $(this),
          value = t.slider("option", "value");

        var new_value = value + (delta / 0);

        if (new_value < 0 || ui.value == 100)
          new_value = 0;
        if (new_value > 100)
          new_value = 100;

        t.siblings('.mix-value').text(new_value);
        t.slider('value', new_value);
      });
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>



<div class="percent-mix"></div><!--Slider -->
<div class="mix-value"></div><!--Slider Value-->



<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>
        </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>
        </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>
        </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>
        </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>
        </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>
        </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>
        </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>
        </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>
        </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>
        </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>
        </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>
        </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>
        </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>
  </ul>
</div>
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
  • _"also have a percentage box that can have from 0 - 100%."_ Can include "percentage box" , "on click append" `html` ? – guest271314 Jun 15 '15 at 15:14
  • Sorry I couldn't make head or tail of that comment? –  Jun 15 '15 at 15:19
  • Can include `html` , `js` having "percentage box" and "on click append" at Question ? – guest271314 Jun 15 '15 at 15:20
  • Sorry mate I still don't understand. –  Jun 15 '15 at 15:21
  • Current `html` at Question does not appear to include "percentage box" `html` ; or "on click append" `js` ? Can include `html` having "percentage box" at original Question ? Or , is Question asking _how_ to create "percentage box" ? Also , what would be appended to randomly selected `div` elements ? – guest271314 Jun 15 '15 at 15:23
  • Can I include the percentage box & the onclick js. No there percentage box is just a number. and on click append is simple js that is irrelevant to the total question. –  Jun 15 '15 at 15:24

3 Answers3

1

If you need to append to a random selection of elements you could do this:

  • put all your elements in a jQuery collection
  • shuffle the collection
  • pick the number of elements you need
  • append to the picked elements

E.g.

var PERCENT = 25; // <-- The value from your % control


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!");
});

An example: JSFiddle

More info: How to randomize (shuffle) a JavaScript array?, Select 5 random elements

Community
  • 1
  • 1
dekkard
  • 6,121
  • 1
  • 16
  • 26
  • Thanks Dekkard this is alot more than what I was asking for thanks. –  Jun 15 '15 at 15:42
0

How about:

  • jquery select of all the divs
  • assign each one a random number
  • sort them by that number
  • take the first x% of them
  • append to those
Sigfried
  • 2,943
  • 3
  • 31
  • 43
0

// `range` : `input type="range"` element
var range = $(".percent-mix").slider({
    min: 0,
    max: 100,
    step: 1,
    slide: function(event, ui) {
      // show `range` value
      output.html(ui.value)
    }
  })
  // `button`
  ,
  button = $("input[type=button]")
  // `output`
  ,
  output = $(".mix-value")
  // `.place` `div` elements
  ,
  places = $(".place");

button.on("click", function(e) {
  // set `.place` `div` `html` to empty string
  places.html(function() {
    return ""
  });
  // `range` value cast to `Number` 100 , or decimal if less than 100
  var r = Number(range.slider("option", "value") === 100 
          ? range.slider("option", "value") 
          : "0." + range.slider("option", "value"));
  // round `r`
  var p = Math.round(r === 100 ? r : places.length * r);
  if (p !== 100) {
    for (var i = 0; i < p; i++) {
      // `j` : "random" `.place`
      var j = Math.floor(Math.random() * places.length);
      // if `.place` at index `j` `.html().length ==== 0` ,
      // append to `.place` at index `j`
      if (places.eq(j).html().length === 0) {
        places.eq(j).html("random")
      }
      // else , filter `.place` , return `s` `.place` `div` elements
      // having `innerHTML.length === 0`,
      // select "random" index from `s` ,
      // append to `.place` at index `Math.random() * s.length`
      else {
        var s = places.filter(function() {
          return this.innerHTML.length === 0
        });
        s.eq(Math.floor(Math.random() * s.length)).html("random")
      }
    };
  } else {
    places.html(function() {
      return "random"
    })
  }
  output.html(range.slider("option", "value"))
});

// do stuff
// set `range` to `25` , trigger `click` on `button`
// "So I have 196 div's and the percent box says 25% when I click I want it to append to 49 of the div's randomly."
range.slider("value", 25).trigger("slide"); // set `range` to `25` : `25%`

button.trigger("click"); // trigger `click` on `button`

var len = places.filter(function() {
  return this.innerHTML.length > 0
});

console.log(len.length); // `49`
.percent-mix {
  width: 100px;
}
<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="percent-mix"></div>
<!--Slider -->
<div class="mix-value"></div>
<!--Slider Value-->
<br />
<!--
<input id="range" type="range" min="0" max="100" /><output for="range"></output>
-->
<input type="button" value="click to append" />
<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>
        </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>
        </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>
        </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>
        </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>
        </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>
        </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>
        </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>
        </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>
        </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>
        </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>
        </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>
        </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>
        </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>
  </ul>
</div>
guest271314
  • 1
  • 15
  • 104
  • 177