简单的 jquery 脚本在 safari 中不起作用

发布于 2024-12-06 16:57:47 字数 2170 浏览 1 评论 0原文

该脚本适用于 Firefox、IE 和 Chrome，但不适用于 Safari。有什么想法吗？

真正奇怪的是，当我将 alert() 放在 .get() 回调末尾时，它就会执行（即使在 safari 中也是如此）。所以代码并没有崩溃，只是没有修改 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>

原文

This script works in firefox, IE, and chrome, but not safari. Any ideas?

The really strange thing is that when I put an alert() at the end of the .get() callback, it executes (even in safari). So the code isn't crashing, it's just not modifying the 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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

我ぃ本無心為│何有愛 2024-12-13 16:57:47

这是您的排序功能的问题。排序函数应返回 -1（更少）、0（等于）或 1（更多）；它不应该返回布尔值。我认为它在其他浏览器中工作的事实在这种情况下是侥幸的。

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

This is an issue with your sort function. The sort function should return -1 (less), 0 (equals), or 1 (more); it shouldn't return a boolean. The fact that it works in other browsers is a fluke in this case I think.

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

回复收藏 0 原文

莫多说 2024-12-13 16:57:47

您需要更改排序功能。请参阅此 jsFiddle。这段代码正在运行：

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

You need to change your sorting function. See this jsFiddle. This code is working:

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

回复收藏 0 原文

~没有更多了~