[javascript/jquery] javascript shuffle elements example / 자바스크립트 요소 랜덤 배치 예제

[javascript/jquery] javascript shuffle elements example / 자바스크립트 요소 랜덤 배치 예제

 

 

 

게시판 혹은 일정 데이터를 반복해서 출력하다보면

 

해당 요소들의 순서를 랜덤으로 섞고 싶은 경우가 있습니다!

 

물론 컨트롤러같은데서

 

오브젝트 혹은 배열의 데이터를 가공해서 가져올 수도 있지만,

 

아래와 같이 간단하게 스크립트로 처리할 수도 있습니다!

 

<script>
$(document).ready(function(){
    var elements = $(".class_name");
    for(var i = 0; i < elements.length; i++){
        var idx = Math.floor(Math.random() * elements.length -1) + 1;
        var idx2 = Math.floor(Math.random() * elements.length -1) + 1;
        elements.eq(idx).before(items.eq(idx2));
    };
});
</script>

 

위 내용 보시면 아시겠지만,

 

class_name 라는 클래스명을 가지는 원소들을 다 모아서

 

위 아래로 순서를 섞는 내용입니다!

 

참고들 하세요!