我目前有这个代码随机排序列表项:
var $ul = $('#some-ul-id');
$('li', $ul).sort(function(){
return ( Math.round( Math.random() ) - 0.5 )
}).appendTo($ul);
但是,还有更好的解决方案吗?
答案 0 :(得分:37)
看看this question and answer thread。我通过用户gruppler
喜欢这个解决方案:
$.fn.randomize = function(selector){
var $elems = selector ? $(this).find(selector) : $(this).children(),
$parents = $elems.parent();
$parents.each(function(){
$(this).children(selector).sort(function(){
return Math.round(Math.random()) - 0.5;
// }). remove().appendTo(this); // 2014-05-24: Removed `random` but leaving for reference. See notes under 'ANOTHER EDIT'
}).detach().appendTo(this);
});
return this;
};
编辑:以下使用说明。
随机化每个'.member'<li>
中的所有<div>
元素:
$('.member').randomize('li');
随机化每个<ul>
的所有孩子:
$('ul').randomize();
另一个编辑: akalata
在评论中告诉我detach()
可以代替remove()
,主要好处是,如果有任何数据或附加的侦听器连接到一个元素并且它们是随机的,detach()
将它们保持在原位。 remove()
只会把听众抛弃。
答案 1 :(得分:0)
我也坚持在谷歌上搜索并遇到一个代码的问题。我为我的用途修改了这段代码。我还在15秒后将列表随机播放。
<script>
// This code helps to shuffle the li ...
(function($){
$.fn.shuffle = function() {
var elements = this.get()
var copy = [].concat(elements)
var shuffled = []
var placeholders = []
// Shuffle the element array
while (copy.length) {
var rand = Math.floor(Math.random() * copy.length)
var element = copy.splice(rand,1)[0]
shuffled.push(element)
}
// replace all elements with a plcaceholder
for (var i = 0; i < elements.length; i++) {
var placeholder = document.createTextNode('')
findAndReplace(elements[i], placeholder)
placeholders.push(placeholder)
}
// replace the placeholders with the shuffled elements
for (var i = 0; i < elements.length; i++) {
findAndReplace(placeholders[i], shuffled[i])
}
return $(shuffled)
}
function findAndReplace(find, replace) {
find.parentNode.replaceChild(replace, find)
}
})(jQuery);
// I am displying the 6 elements currently rest elements are hide.
function listsort(){
jQuery('.listify_widget_recent_listings ul.job_listings').each(function(index){
jQuery(this).find('li').shuffle();
jQuery(this).find('li').each(function(index){
jQuery(this).show();
if(index>=6){
jQuery(this).hide();
}
});
});
}
// first time call to function ...
listsort();
// calling the function after the 15seconds..
window.setInterval(function(){
listsort();
/// call your function here 5 seconds.
}, 15000);
</script>
希望这个解决方案有所帮助....有一个很棒的工作时间..