Question

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>

Answer 1

如果你需要附加随机选择的元素，你可以这样做：

将所有元素放在jQuery集合中
随机播放
选择您需要的元素数量
附加到拾取的元素

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

示例：JSFiddle

更多信息：How to randomize (shuffle) a JavaScript array?，Select 5 random elements

Answer 2

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

Answer 3

@Override
    public boolean deleteGroupSection(int sectionId, int mcanvasId) {
        try {
            GroupCanvas groupCanvas = this.groupCanvasService.getCanvasById(mcanvasId);
            Long groupAccountId = this.groupAccountService.getGroupById(groupCanvas.getGroupAccountId()).getGroupId();
            this.groupAttachmentsService.deleteAttachmentsForSection(sectionId,groupAccountId);
        }catch (Exception ignored){}

        this.groupSectionDAO.deleteGroupSection(sectionId,mcanvasId);

        for(Iterator<GroupSection> it = groupCanvas.getGroupSections().iterator(); it.hasNext();){
            GroupSection gs = it.next();
            if(gs.getId().equals(sectionId)){
                it.remove(gs);
            }
        }
        return true;
    }

// `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;
}

Jquery Append to x amount of box's based on percentage

3 个答案:

Jquery Append to x amount of box&#39;s based on percentage

3 个答案:

Jquery Append to x amount of box's based on percentage