2011-09-28 4 views
2

이 스크립트는 파이어 폭스, IE 및 크롬에서 작동하지만 사파리에서는 작동하지 않습니다. 어떤 아이디어?간단한 jquery 스크립트가 사파리에서 작동하지 않습니다.

정말 이상한 점은 .get() 콜백 끝에 alert()을 넣을 때 (사파리에서도) 실행된다는 것입니다. 따라서 코드가 충돌하지 않고 단지 DOM을 수정하지 않습니다.

<html> 
<head> 
    <title>Title for this webpage</title> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script> 

<!- CSS styling --------------------------------------------------------------> 
<style type="text/css"/> 
body{ 
    margin:0px; 
    padding:0px; 
    font-family:verdana, arial, helvetica, sans-serif; 
    font-size:14px; 
    text-align:left; 

    width:900px; 
    margin-left:auto; 
    margin-right:auto; 
    position:relative; 

    background-color:#fff; 
} 

#mainBox{ 
    width:700px; 
    margin:30px; 
    border:2px solid #ddd; 
    margin-left:auto; 
    margin-right:auto; 
} 

#mainHeader, #mainFooter, #mainContent{ 
    margin: 5px; 
    padding:10px; 
    border: 2px dashed #ddd; 
    text-align:center; 
} 

.shuffleMe{ 
    margin: 5px; 
    padding:10px; 
    border: 2px solid #ddd; 
    text-align:left; 
} 
</style> 

<!- Jquery/javascript --------------------------------------------------------> 
<script type="text/javascript"> 
//Code modified from: http://stackoverflow.com/questions/1134976/how-may-i-sort-a-list-alphabetically-using-jquery 
$(document).ready(function(){ 
    var my_list = $('.shuffleMe').get(); 
    my_list.sort(function(){return(Math.random() >.5);}); 
    $.each(my_list, function(index, item) { $('#mainContent').append(item); }); 
}); 
</script> 

</head> 

<!- HTML body content --------------------------------------------------------> 
<body> 
<div id="mainBox"> 
    <div id="mainHeader"> --- HEADER --- </div> 
    <div id="mainContent"> 
     <div class="shuffleMe">AAA</div> 
     <div class="shuffleMe">BBB</div> 
     <div class="shuffleMe">CCC</div> 
     <div class="shuffleMe">DDD</div> 
    </div> 
    <div id="mainFooter"> --- FOOTER --- </div> 
</div> 

</body> 
</html> 
+0

다른 버전의 jQuery를 사용하여 버전의 버그인지 확인해 보셨습니까? 또한 사파리에서 Math.random()에 대해 많은 문제가보고되었습니다. 문제가있을 수 있습니다. – Einacio

+1

DOM을 수정하고 있지만 정렬 순서가 변경되지 않았습니다. '$ .each()'문에서 각 항목의 HTML을 조정하면, 업데이트 된 것을 볼 수 있습니다. 왜'sort()'메소드가 작동하지 않는지 알아 내려고하고있다. –

+0

hm. 좋은 제안. 방금 jquery 몇 가지 다른 버전을 시도 - 아무 변화. 또한 다음 행을 연결했습니다. alert (Math.random()); 각 reload는 나에게 다른 무작위 보이는 수를 준다, 그래서 나는 그것이 문제라고 생각하지 않는다. ... – Abe

답변

3

이것은 정렬 기능에서 발생하는 문제입니다. sort 함수는 -1 (less), 0 (equals) 또는 1 (more)를 반환해야합니다. 그것은 부울을 리턴해서는 안된다. 다른 브라우저에서 작동한다는 사실은 우연이라고 생각합니다.

my_list.sort(function(){return(Math.random() - .5);}); 
+0

아하 사람, 나를 초까지 대답을 게시하는 것에 이겼다 :) –

3

정렬 기능을 변경해야합니다. 이 부분은 jsFiddle입니다. 이 코드는 작동하고 있습니다 :

var my_list = $('.shuffleMe').get(); 
my_list.sort(function(){ 
    return 0.5 - Math.random(); 
}); 
$.each(my_list, function(index, item) {$('#mainContent').append(item); }); 
관련 문제