Javascript 排序<；李>；使用jQuery

目前我有一个语言选择，它是一个简单的

，里面有

s和

s

每个

都有一个类-

lang inactive

或

lang active

。这取决于用户当前使用的语言

默认情况下，带有

.lang非活动的
将隐藏。当您使用
.hover（）
时，将显示
ul
其他选项



下面是一个简单的例子

但正如您所看到的，第一个
是法语，当我使用
英语时，我将鼠标悬停在语言栏上，法语显示在英语上方

是否有一种方法可以根据
语言处于活动状态
或
语言处于非活动状态
对
进行排序。非活动的应显示在活动的下方

我目前的代码是：

var ul = $('#languages-iv');
    ul.css('position', 'absolute');
    ul.css('top', 5);
    li = ul.children('li');

    li.detach().sort(function(a,b) {
       //how do I sort
    });

    ul.append(li);
$("#languages-iv").hover(function(){
    $('.lang-inactive').slideToggle();
}, function() {
    $('.lang-inactive').stop().slideToggle();
});

这在页面加载时执行（或在创建语言选择器时执行），应该将活动语言推送到第一个子级

$('.lang-active').prependTo('#languages-iv');

演示：

这是您的分类：

var listItems = myList.children('li').get();
listItems.sort(function(a,b){
  return $(a).hasClass('lang-inactive') ? -1 : $(b).hasClass('lang-inactive') ? 1 : 0;
});






$（文档）.ready（函数（）{
$（'ul li'）.live（'click'，function（）{
$（'li a'）.removeClass（'lang-active'）；
var elem=$（本）；
$（this.remove（）；
$（'ul'）。前置词（elem）；
$（this）.children（'a'）.addClass（'lang-active'）；
});
});
当然有。你尝试了什么，OP？我很困惑。为我们制作一个JSFIDLE？错误的控制台副本。我明白了：）
    <ul>
        <li><a href="#" class="lang-active">English</a></li>
        <li><a href="#">French</a></li>
        <li><a href="#">German</a></li>
    </ul>

<script>
    $(document).ready(function(){
        $('ul li').live('click',function(){
            $('li a').removeClass('lang-active');
            var elem = $(this);
            $(this).remove();
            $('ul').prepend(elem);
            $(this).children('a').addClass('lang-active');
        });
    });
<script>