javascript 如何随机排序列表项？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14555415/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to randomly sort list items?
提问by Ivan
I currently have this code that randomly sorts list items:
我目前有这个随机排序列表项的代码：
var $ul = $('#some-ul-id');
$('li', $ul).sort(function(){
return ( Math.round( Math.random() ) - 0.5 )
}).appendTo($ul);
However, is there any better solution for that?
但是，有没有更好的解决方案呢？
回答by JakeGould
Look at this question and answer thread. I like this solution via the user gruppler:
看看这个问答线程。我喜欢通过用户这个解决方案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;
};
EDIT:Usage instructions below.
编辑：下面的使用说明。
To randomize all <li>elements within each '.member' <div>:
随机化<li>每个 '.member' 中的所有元素<div>：
$('.member').randomize('li');
To randomize all children of each <ul>:
随机化每个的所有孩子<ul>：
$('ul').randomize();
ANOTHER EDIT:akalatahas let me know in the comments that detach()can be used instead of remove()with the main benefit being if any data or attached listeners are connected to an element and they are randomized, detach()will keep them in place. remove()would just toss the listeners out.
另一个编辑：akalata在评论中告诉我detach()可以使用而不是remove()主要好处是如果任何数据或附加的侦听器连接到元素并且它们是随机的，detach()将使它们保持原位。remove()只会把听众赶出去。
回答by Sachin
I also stuck to such questions I search on google and come across one code. I modify this code for my uses. I also include the shuffle the list after 15 seconds.
我也坚持在谷歌上搜索并遇到一个代码的这些问题。我修改此代码以供我使用。我还包括 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>
Hope this solution helps....Have a great working time ..
希望这个解决方案有帮助......祝你工作愉快......
