divやdivのコレクションをランダムにスワップするためのアドバイスやライブラリはありますか？

Question

ロゴのコレクションから1つのロゴをランダムにスワップするのに使用できるアドバイスやライブラリがありますか？

簡易構造：

<div class="container"> 
    <div class="graybox" id="logo1"></div> 
    <div class="graybox" id="logo2"></div> 
    <div class="graybox" id="logo3"></div> 
    <div class="graybox" id="logo4"></div> 
    <div class="graybox" id="logo5" style="display:none;"></div> 
    <div class="graybox" id="logo6" style="display:none;"></div> 
    <div class="graybox" id="logo7" style="display:none;"></div> 
</div> 

より視覚的なガイド用のペン：

http://codepen.io/rjschill/pen/rrBaYo

これは私が構築しようとしているものの非常に単純化したバージョンである - コンテナがあります設定された数のロゴを保持します。この場合、4つのロゴが表示され、3つは隠されています。私がやろうとしている何

：

はランダムに見えるのdivのいずれかの隠されたdiv要素の一つを交換し、ランダムにをループ続けます。

私は問題にアプローチするのに手間がかかっています。正しい解決策を書くためのアドバイス、または私が探しているものを達成するライブラリがあれば幸いです。

Answer 1

$.fn.random = function() { return this.eq(Math.random() * this.length | 0) } 
 
setInterval(function() { 
 
    $(".show").random().add($(".hide").random()).toggleClass("show hide"); 
 
}, 1000);

.hide { visibility: hidden }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span class="show">1</span> 
 
<span class="show">2</span> 
 
<span class="show">3</span> 
 
<span class="show">4</span> 
 
<span class="hide">5</span> 
 
<span class="hide">6</span> 
 
<span class="hide">7</span>

Answer 2

<div class="graybox"> 
    <div class="inner"> 
    First Box 
    </div> 
</div> 
<div class="graybox"> 
    <div class="inner"> 
    Second Box 
    </div> 
</div> 
<div class="graybox"> 
    <div class="inner"> 
    Third Box 
    </div> 
</div> 
<div class="graybox" style="display:none"> 
    <div class="inner"> 
    Fourth Box 
    </div> 
</div> 
<div class="graybox" style="display:none"> 
    <div class="inner"> 
    Fifth Box 
    </div> 
</div> 

はjavascript：

//Cache elements 
var $boxes = $(".graybox"), 
    $visible = $boxes.filter(":visible"), 
    $hidden = $boxes.filter(":hidden"), 
    $targetVisible, $targetHidden, interval; 


interval = window.setInterval(function(){ 
    //Get a random hidden and visible container 
    $targetVisible = $visible.eq(Math.floor(Math.random() * $visible.length)), 
    $targetHidden = $hidden.eq(Math.floor(Math.random() * $hidden.length)); 
    $targetVisible 
    .children() 
    .replaceWith($targetHidden.children()) //Swap the childs, eg. .inner 
     .appendTo($targetHidden); //Append hidden element to visible 
}, 1000); 

CodePen

Answer 3

HTMLコード

に見ることができます0

<div class="container"> 
     <div class="graybox" id="logo1">1</div> 
     <div class="graybox" id="logo2">2</div> 
     <div class="graybox" id="logo3">3</div> 
     <div class="graybox" id="logo4">4</div> 
     <div class="graybox" id="logo5" style="display:none;">5</div> 
     <div class="graybox" id="logo6" style="display:none;">6</div> 
     <div class="graybox" id="logo7" style="display:none;">7</div> 
</div> 

JS示してどのような条件のスワップアウトかのコード

$(document).ready(function() 
{ 
    setTimeout(function() 
    { 
     //get .container all visible children 
     var visibleDiv = $(".container :visible"), 
     //get .container all hidden children 
      hiddenDiv = $(".container :hidden"); 
     //get a number of 0 to visibleDiv.length-1 
     var v = getRandomInteger(0,visibleDiv.length-1), 
      h = getRandomInteger(0,hiddenDiv.length-1); 
     //toggle() if element is visible then hidden,if element is hidden then visible 
     visibleDiv.eq(v).toggle(); 
     hiddenDiv.eq(h).toggle(); 
     if(getRandomInteger(0,20)!=10) 
     { 
      setTimeout(arguments.callee,1000); 
     } 
    },1000) 
}) 
function getRandomInteger(min,max) 
{ 
    return Math.floor(Math.random()*(max-min+1))+min 
}