여러 개의 동일한 class를 가진 div 중에서 하나만 랜덤하게 표시하고 싶은 경우가 있을 수 있습니다.
예를 들어, 다음과 같은 html 코드가 있을 때:
<div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div>
로드할 때마다 이 3개 항목 중 임의로 하나만 표시해야 하는 경우가 있을 수 있습니다.
이 경우 다음과 같은 jQuery를 사용해볼 수 있습니다.
var random = Math.floor(Math.random() * $('.item').length); $('.item').hide().eq(random).show(); // 출처: stackoverflow
여기에서 데모를 확인해볼 수 있습니다.
javascript로도 가능합니다.
window.onload=function() { var E = document.getElementsByClassName("item"); var m = E.length; var n = parseInt(Math.random()*m); for (var i=m-1;i>=0;i--) { var e = E[i]; e.style.display='none'; } E[n].style.display=''; } // jsfiddle 데모
만약 여러 개 항목 중에서 특정 개수(예: 4개)만 표시해야 하는 경우에는 다음과 같은 jQuery를 사용할 수 있습니다.
HTML 코드:
<div class="Image"><img src="/image1.jpg">1</div> <div class="Image"><img src="/image2.jpg">2</div> <div class="Image"><img src="/image3.jpg">3</div> <div class="Image"><img src="/image4.jpg">4</div> <div class="Image"><img src="/image5.jpg">5</div> <div class="Image"><img src="/image6.jpg">6</div> <div class="Image"><img src="/image7.jpg">7</div>
jQuery 스크립트:
var divs = $("div.Image").get().sort(function(){ return Math.round(Math.random())-0.5; //so we get the right +/- combo }).slice(0,4); $(divs).show(); // 출처: stackoverflow
그리고 "Display Random Content with JavaScript" 글도 참고해볼 수 있습니다.