무작위 div 종류 순서

많은 사람들이 제안했듯이, 나는 그들의 조언을 받아 내 질문을 개혁했습니다. 나는 많은 코드를 꺼내서 최소의 것을 보여 주었다. 이것이 내 질문을 다시 열 수있을만큼 충분하고 분명하기를 바랍니다. 다음 HTML로 http://jsfiddle.net/mauricederegt/vNpYe/5/무작위 div 종류 순서

: 내가 사업부의 클래스 오프 순서를 무작위하려고

<div id="main" tabindex="1"> 
      <div class="tile tile1" block-id="1" style-id="1" style="left:0px; top:0px"></div> 
      <div class="tile tile3" block-id="2" style-id="2" style="left:100px; top:0px"></div> 
      <div class="tile tile1" block-id="3" style-id="1" style="left:200px; top:0px"></div> 
      <div class="tile tile2" block-id="4" style-id="2" style="left:350px; top:0px"></div> 
      <div class="tile tile2" block-id="5" style-id="2" style="left:0px; top:100px"></div> 
      <div class="tile tile1" block-id="6" style-id="1" style="left:100px; top:100px"></div> 
</div>

나는 다음과 같은 바이올린을 가지고있다. 따라서 class 부분 : class="tile tile1", div의 다른 모든 항목은 그대로 유지됩니다.

예 : 코드는 (단지 class이 단행되는 메모를) 랜덤 후 다음과 같이 수 :

<div id="main" tabindex="1"> 
       <div class="tile tile3" block-id="1" style-id="1" style="left:0px; top:0px"></div> 
       <div class="tile tile2" block-id="2" style-id="2" style="left:100px; top:0px"></div> 
       <div class="tile tile1" block-id="3" style-id="1" style="left:200px; top:0px"></div> 
       <div class="tile tile2" block-id="4" style-id="2" style="left:350px; top:0px"></div> 
       <div class="tile tile1" block-id="5" style-id="2" style="left:0px; top:100px"></div> 
       <div class="tile tile1" block-id="6" style-id="1" style="left:100px; top:100px"></div> 
    </div>

어떻게 사업부의 클래스가 임의의 순서로 표시 할 수 있습니까?

질문이 더 명확 해지기를 바랍니다.

많은 감사합니다.

출처

2013-03-31 Maurice

function shuffle(a) { var t; for (var i = a.length - 1; i > 0; --i) { var p = Math.floor(Math.random() * (i + 1)); if (p !== i) { t = a[i]; a[i] = a[p]; a[p] = t; } } } shuffle(tiles);

마지막으로, 다시 결과를 병합 :

var tiles = [], tile_re = /tile(\d+)/; $('.tile').each(function(i) { tiles[i] = this.className.match(tile_re)[0]; });

그런 다음, 당신은 클래스의 배열을 셔플 필요 . 특히 '셔플 스타일'이 무엇을 의미하는지 또는 레이어 나 레벨이 데모와 관련하여 무엇을 의미하는지 정의하지 않았기 때문에 특히 그렇습니다. 데모는 전체 응용 프로그램이 아닌 문제를 제시 할 수있는 코드 만 제공하도록 축소해야합니다. 물론 렌더링 코드의 대부분을 제거하고 정적 HTML로 대체 할 수 있습니다. 스크립트를 사용하여 수행하려는 작업을 처리 할 수 있습니다. – charlietfl

코드 양에 대해서는 동의하지 않습니다. 나는 여분의 지원을 위해 그것을 fiddled. 그것을 제거하거나 그것에있는 코멘트는 일을 더 막연하게 만들 것입니다. 그럼에도 불구하고 나는 서면의 실수를 발견했습니다. 나는 div 스타일을 고쳐야하지. 이것을 수정하고 여분의 HTML 예제를 추가했습니다. – Maurice

@Maurice : jQuery에서 특정 작업을 수행하는 방법을 배우고 싶다면 가장 간단한 버전의 문제를 제시하십시오. 당신이 시작 컴퓨터 수업의 첫날에 선생님이라고 상상해보십시오. 학생들에게 그것을 어떻게 제시하여 문제의 본질을 정확히 이해할 수 있습니까? (물어 보거나 이런 종류의 기본 문제를 해결하는 방법을 가르치기 전에)? 이것이 Stackoverflow에 대한 질문입니다. 가장 간단한 형태로 줄이기에 충분할 때까지 문제를 연구하십시오. –

먼저 타일 클래스의 배열이 필요합니다. 데모를 검토하는 코드의 말도 안되는 금액입니다

$('.tile').each(function(i) { 
    this.className = 'tile ' + tiles[i]; 
});

출처

2013-04-08 23:33:25

감사합니다. 완벽하게 작동합니다. 다른 사람들이 행동에서 그것을보고 싶다면 나는 바이올린을 만들었습니다 : http://jsfiddle.net/mauricederegt/EFCex/ – Maurice

무작위 div 종류 순서

답변

관련 문제