Member Avatar for jonsan32

I'm using the code below to get a random number of items from an array, but I'd like to just get 3-5 random numbers from the provide range to display. Right now, it either shows 1, all, or any amount in between. I'm also good with completely changing up my strategy, so any and all advice is welcome. Much appreciated. 

<script type="text/javascript" src="https://fiftyallstars.com/Code/jquery-2.2.4.js"></script>

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>

<script type="text/javascript">
$('div').filter(function(){
    return (Math.round(Math.random()) == 1);
}).css({display: 'none'});
</script>
  • 4 Contributors
  • 3 Replies
  • 118 Views
  • 4 Weeks Discussion Span
  • Latest Post Latest Post by Dani

Dani AI

Generated

Your current approach makes each DIV independently pass a 50/50 test, so the number shown varies wildly (sometimes 0, sometimes many). To guarantee exactly 3–5 items you must: 1) pick a single random count N between 3 and 5, then 2) sample N distinct elements (sampling without replacement). A simple, reliable pattern is to convert the jQuery collection to an array, Fisher‑Yates shuffle it, take the first N, show those and hide the rest.

// run after the elements exist (DOM ready or after creation)
var $items = $('.numbers div'); // use a specific selector, not $('div')
function randomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
function shuffle(array) {
  for (var i = array.length - 1; i > 0; i--) {
    var j = Math.floor(Math.random() * (i + 1));
    var tmp = array[i];
    array[i] = array[j];
    array[j] = tmp;
  }
}
var arr = $items.toArray();
shuffle(arr);
var n = Math.min(arr.length, randomInt(3, 5)); // clamp if fewer items exist
$items.hide();
$(arr.slice(0, n)).show();

As asked about dynamism: run this after the elements are in the DOM (or call it from the callback that inserts them). As showed, picking one random element is easy; when you need several, avoid repeated picks with replacement (that creates duplicates) — use shuffle or remove chosen items. is right that only the DOM presence matters — also avoid selecting all page DIVs; use a container or class selector.

Quick tips: if there may be fewer than the requested minimum, decide whether to show them all or adjust the min. Prefer toggling a class for hiding so you preserve layout/display nuances, and cache the selector if this runs often. For repeatable output (tests), use a seeded RNG library.

Recommended Answers

All 3 Replies

Member Avatar for Mr.M

Where will those div values come from? Will it be known fixed (constant) values or dynamic?

Member Avatar for appicoders

define custom function that accepts list and returns element

get_random = function (list)
{
     resturn list [Math.floor((Math.random()*list.length))];
}

get_random([2,3,5])
Member Avatar for Dani

Where will those div values come from? Will it be known fixed (constant) values or dynamic?

I don't think it really matters how or why we ended up with a series of <div>s that each contain a number. All that matters is they're in the DOM as so when it is time to select a handful of them.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.