Question

我有一个列表，例如：

 <ul id="my_list">
    <li class="notrelevant"><a href="#1">something not relevant</a></li>
    <li class="notrelevant"><a href="#2">something not relevant</a></li>
    <li class="notrelevant"><a href="#3">something not relevant</a></li>
    <li class="notrelevant"><a href="#4">something not relevant</a></li>
    <li class="notrelevant"><a href="#5">something not relevant</a></li>


    <li class="relevant"><a href="#75">something not relevant</a></li>
</ul>

你可以看到列表的最后一个类是相关的，这个类应该总是在列表的末尾！

我尝试用这个随机命令列表：

$(document).ready(function(){
    var liArr =[]

    $('ul').each(function(){
        var $ul = $(this);
        liArr = $ul.children('li');
     });    
    var i = liArr.length,
        j, temp;
    while (--i) {
        j = Math.floor(Math.random() * (i + 1));
        temp = liArr[i];
        liArr[i] = liArr[j];
        liArr[j] = temp;
    };
$('ul').append(liArr);            
});

并且ofc是在中间的某个地方的分拣。我不想忽略最后一项，所有标签都必须随机排序。

如何随机订购列表并将最后一个类别设置为“相关”，或者我只能对标签进行操作？

Answer 1

为什么不将shuffle plugin用于jQuery：

<script type="text/javascript" src="jquery-shuffle.js"></script>
<script>
$(function() {
   $('#my_list li').shuffle();
});
</script>

然后将类名应用于last-child：

$('#my_list li:last-child').attr('class', 'relevant');

Answer 2

var $list = $('#my_list'), 
    $li = $list.find('li:not(:last)');
$li.sort(function(){
   return Math.floor(Math.random() * 3);
}).prependTo($list);

http://jsfiddle.net/Sa6GG/

或者：

var $list = $('#my_list'), 
    $li = $list.find('li');

$li.sort(function(){
   return Math.floor(Math.random() * 3);
});

$li.prop('class', 'notrelevant')
   .last()
   .prop('class', 'relevant')
   .end()
   .appendTo($list);

http://jsfiddle.net/MQYA3/

jQuery：订单列表项但保留类

2 个答案: