使用jQuery <li>排序<li>

Question

目前我有一个语言选择，其中包含<ul>和<li> s的简单<a>。

每个<li>都有一个类 - lang-inactive或lang-active。这取决于用户现在使用的语言。

默认情况下隐藏<li> .lang-inactive .hover()。当您ul <li>时，会显示其他选项。

这是一个简单的例子。

但是你可以看到第一个English是法语，当我使用<li>时，我徘徊在语言栏上，法语出现在英语上。

我是否可以根据lang-active或lang-inactive对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(); }); 进行排序。不活动的应该出现在活动的那个之下。

我目前的代码是：

{{1}}

Answer 1

这是在页面加载时执行的（或者无论何时创建语言选择器）都应该将活动语言推送到第一个孩子。

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

演示：

http://jsfiddle.net/gqfPV/

Answer 2

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

Answer 3

这是你的排序：

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