Question

I have a list with classes eg:

 <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>

U can see that te last class of the list is relevant and this class should always be on the end of the list!

I try to order the list randomly with this:

$(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);            
});

And ofc is sortet to somewhere in the middle.
I dont want to ignore the last item, all tags have to be sorted randomly.

How can i order the list randomly and set only the last class to “relevant”, or can i only oder the tag?

Answer 1

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/

Or:

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/