random reserve show with jquery or javascript

Question

i have this code :

<div class="row">
<div class="row__seat tooltip" data-tooltip="A1"></div>
<div class="row__seat tooltip" data-tooltip="A2"></div>
<div class="row__seat tooltip" data-tooltip="A3"></div>
<div class="row__seat tooltip" data-tooltip="A4"></div>
<div class="row__seat tooltip" data-tooltip="A5"></div>
<div class="row__seat tooltip" data-tooltip="A6"></div>
<div class="row__seat tooltip" data-tooltip="A7"></div>
<div class="row__seat tooltip" data-tooltip="A8"></div>
<div class="row__seat tooltip" data-tooltip="A9"></div>
<div class="row__seat row__seat--reserved"></div>
<div class="row__seat row__seat--reserved"></div>
<div class="row__seat row__seat--reserved"></div>
<div class="row__seat tooltip" data-tooltip="A13"></div>
</div>

i want randomly change class row__seat tooltip to row__seat row__seat--reserved

i want to randomly mode or shuffle , change to class when visit page — Ehsan Pakroo, Jun 30 '17 at 22:45
Possible duplicate of [Shuffle all DIVS with the same class](https://stackoverflow.com/questions/13427287/shuffle-all-divs-with-the-same-class) — Omi, Jun 30 '17 at 23:02

score 0 · Accepted Answer · answered Jul 01 '17 at 07:30

Here is exactly what you need.

$(document).ready(function(){

var element = $('.row__seat'),
    maxLimit = element.length - 1,
    minLimit = 0,
    requiredRandomSelection = 3
$(element).each(function(){
    $(this).removeClass('tooltip');  
    $(this).removeClass('row__seat--reserved');
});
var selectedIndex = [];
while(selectedIndex.length !== requiredRandomSelection){
   var rand = Math.floor(Math.random() * (maxLimit - minLimit + 1)) + minLimit;
   if( selectedIndex.indexOf(rand) === -1){
        selectedIndex.push(rand);
        $(element[rand]).addClass('row__seat--reserved');
   }
}
$(element).each(function(index){
     if(selectedIndex.indexOf(index) === -1){
        $(this).addClass('tooltip');  
     }
});

});

.tooltip{
  color: green;
}

.row__seat--reserved{
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="row__seat tooltip" data-tooltip="A1">aaaa</div>
<div class="row__seat tooltip" data-tooltip="A2">bbbb</div>
<div class="row__seat tooltip" data-tooltip="A3">cccc</div>
<div class="row__seat tooltip" data-tooltip="A4">dddd</div>
<div class="row__seat tooltip" data-tooltip="A5">eeee</div>
<div class="row__seat tooltip" data-tooltip="A6">ffff</div>
<div class="row__seat tooltip" data-tooltip="A7">gggg</div>
<div class="row__seat tooltip" data-tooltip="A8">hhhh</div>
<div class="row__seat tooltip" data-tooltip="A9">iiii</div>
<div class="row__seat row__seat--reserved">jjjj</div>
<div class="row__seat row__seat--reserved">kkkk</div>
<div class="row__seat row__seat--reserved">llll</div>
<div class="row__seat tooltip" data-tooltip="A13">mmmm</div>
</div>

For understanding i have added the css property for tooltip and row__seat--reserved so that you can observe the change. To test just click on 'Run Code Snippet' button again and again. Also, i have set the variable requiredRandomSelection as 3 which means that you need to have only 3 elements with the class row__seat--reserved which is randomly selected. You can simply increase this value but remember it cannot be greater than the number of elements with class row__seat. The code also make sure that the random elements are not repeated, hence it picks the unique <div>.

Could you please upvote and mark it so that others can know it has been properly accepted by you. — Ankit Agarwal, Jul 01 '17 at 10:42
I mean the up vote. Click on that up caret. I guess it is not done. Anyways happy to help you. — Ankit Agarwal, Jul 01 '17 at 11:05

random reserve show with jquery or javascript

1 Answers1