여러 개의 동일한 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" 글도 참고해볼 수 있습니다.