Good day! You need to randomly change the divs in order for them to be different after each reboot.

Structural html something like this:

<div class=parent"> <div class="children" id=1></div> <div class="children" id=2></div> <div class="children" id=3></div> <div class="children" id=4></div> </div>

child elements can be many.

Thanks in advance for the answer!

    1 answer 1

     $(function () { var parent = $("#shuffle"); var divs = parent.children(); while (divs.length) { parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]); } }); 
     #shuffle > div { float: left; line-height: 30px; width: 30px; text-align: center; background-color: steelblue; color: #fff; border-radius: 4px; margin: 3px; } #shuffle { max-width: 360px; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="shuffle"> <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> <div>13</div> <div>14</div> <div>15</div> <div>16</div> <div>17</div> <div>18</div> <div>19</div> <div>20</div> <div>21</div> <div>22</div> <div>23</div> <div>24</div> <div>25</div> <div>26</div> <div>27</div> <div>28</div> <div>29</div> <div>30</div> <div>31</div> <div>32</div> <div>33</div> <div>34</div> <div>35</div> <div>36</div> <div>37</div> <div>38</div> <div>39</div> <div>40</div> <div>41</div> <div>42</div> <div>43</div> <div>44</div> <div>45</div> <div>46</div> <div>47</div> <div>48</div> <div>49</div> <div>50</div> <div>51</div> <div>52</div> <div>53</div> <div>54</div> <div>55</div> <div>56</div> <div>57</div> <div>58</div> <div>59</div> <div>60</div> <div>61</div> <div>62</div> <div>63</div> <div>64</div> <div>65</div> <div>66</div> <div>67</div> <div>68</div> <div>69</div> <div>70</div> <div>71</div> <div>72</div> <div>73</div> <div>74</div> <div>75</div> <div>76</div> <div>77</div> <div>78</div> <div>79</div> <div>80</div> <div>81</div> <div>82</div> <div>83</div> <div>84</div> <div>85</div> <div>86</div> <div>87</div> <div>88</div> <div>89</div> <div>90</div> <div>91</div> <div>92</div> <div>93</div> <div>94</div> <div>95</div> <div>96</div> <div>97</div> <div>98</div> <div>99</div> <div>100</div> </div>